javascript - 在 Angular 中操作组件的 DOM 元素
问题描述
我是 Angular 的新手,我正在尝试根据该实例的输入数据来操作组件的 html 模板实例。我想取一个整数值并产生与您在星级评分系统中看到的相同数量的星星(与 html 实体 ★ 一样)。我有一个父组件“RatingList”,它动态生成一个包含星级的“RatingCard”(例如参见照片)。我能够动态创建“RatingCard”,并且在ngAfterViewInit期间,我正在尝试创建星级。我使用selectRootElement访问要放置星星的元素,但它似乎只获取“RatingCard”的第一个实例,然后将所有后续实例添加到该实例的星级。
我想知道在 RatingCard 实例中找到特定 html 标记然后更新它的正确方法是什么。我曾尝试使用ViewChild声明一个变量,但这似乎不起作用。我也想知道如何正确插入 html 实体作为明星。感谢您考虑这一点!
为了清楚起见,我删除了一些代码。
评级-list.component.ts
import {Component, Input, OnInit, ComponentFactoryResolver, OnDestroy, ViewContainerRef, Type} from "@angular/core";
import { RatingCardComponent} from "../rating-card/rating-card.component"
let titles = ["Road to Perdition", "Cool Hand Luke"]
let ratings = [7, 4];
@Component({
selector: 'app-rating-list',
template: '<ng-template appRatingHost></ng-template>'
})
export class RatingListComponent implements OnInit {
constructor(private vf:ViewContainerRef, private componentFactoryResolver : ComponentFactoryResolver) {}
ngOnInit(): void {
this.loadComponents();
}
loadComponents() {
for (let index = 0; index < 2; index++) {
const componentFactory =
this.componentFactoryResolver.resolveComponentFactory(RatingCardComponent);
const componentRef = this.vf.createComponent<RatingCardComponent>(componentFactory);
const data = {imgUrl : urls[index], title : titles[index], rating : ratings[index]};
componentRef.instance.data = data;
}
}
评级卡.component.ts
import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';
@Component({
selector: 'app-rating-card',
templateUrl: './rating-card.component.html',
styleUrls: ['./rating-card.component.css']
})
export class RatingCardComponent implements OnInit {
data : any;
@ViewChild('#rating-header') rating_header? : ElementRef;
constructor(private renderer : Renderer2, private el : ElementRef) { }
ngOnInit(): void {
}
ngAfterViewInit()
{
this.setupRating(this.data.rating)
}
setupRating(size : Number) : void {
for (let index = 0; index < size; index++) {
let starContainer = this.renderer.createElement('span');
let text = this.renderer.createText("☆");
this.renderer.addClass(starContainer, 'gold_full_star');
this.renderer.appendChild(starContainer, text);
const rating_header = this.renderer.selectRootElement("#rating-header", true);
this.renderer.appendChild(rating_header, starContainer);
}
}
}
rating-card.component.html
<div class="card" tabindex="0">
<img class="movieimg" height=96x width=96px alt="" src={{data.imgUrl}}/>
<h3 class="card-title">{{data.title}}</h3>
<h4 class="card-subtitle" id="rating-header">Rating:{{data.rating}}</h4>
<p class="card-text">This is where I write my review ... ?</p>
</div>
解决方案
为什么不直接创建一个 star-rating.component 并使用 angular 语法使用 *ngFor 循环来制作星星,而不是搞乱底层的 dom 结构?
推荐阅读
- javascript - 如果 JavaScript 条件为真,则执行 PHP 脚本
- regex - 用于验证数字格式的 RegEx
- r - 如何将字符串转换为R中的赋值语句?
- python - 如何解决大小为 sum+1 的数组的子集和问题
- bash - bash 中的“${file%.*}”是什么意思
- jquery - 使用基于元素 id 的属性的 JQuery 动画
- bash - bash脚本中右键单击项目(例如jpg)的变量?
- mysql - MySQL ERROR 502: "SELECT * FROM table WHERE uid=1 ORDER BY id DESC LIMIT 0, 100"; 分页不起作用
- amazon-web-services - 创建 API Gateway AWS 与 S3 的集成
- assembly - char 导致程序一次循环后无限循环