[英]Manipulating a component's DOM elements in Angular
I am new to angular and I am trying to manipulate an instance of a component's html template based on that instance's input data.我是 angular 的新手,我正在尝试根据该实例的输入数据操作组件的 html 模板的实例。 I want to take an integer value and produce the same number of stars (as the html entity ★) as you would see in a star rating system.
我想取一个 integer 值并产生与您在星级评分系统中看到的相同数量的星星(与 html 实体 ★ 一样)。 I have a parent component "RatingList" that dynamically produces a "RatingCard" which contains the star rating (see photo for example).
我有一个父组件“RatingList”,它动态生成一个包含星级的“RatingCard”(例如参见照片)。 I am able to dynamically create the "RatingCard" and during ngAfterViewInit , I am trying to create the star rating.
我能够动态创建“RatingCard”,并且在ngAfterViewInit期间,我正在尝试创建星级。 I access the element where I want to put the stars by using selectRootElement but it seems to only grab the first instance of a "RatingCard" and then adds all subsequent instances to the star ratings of that instance.
我使用selectRootElement访问要放置星星的元素,但它似乎只获取“RatingCard”的第一个实例,然后将所有后续实例添加到该实例的星级。
I am wondering what is the proper way to find a specific html tag in an instance of a RatingCard and then update it.我想知道在 RatingCard 实例中找到特定 html 标签然后更新它的正确方法是什么。 I have tried declaring a variable using ViewChild but that does not seem to work.
我曾尝试使用ViewChild声明一个变量,但这似乎不起作用。 I am also wondering how to properly insert the html entity for a star.
我还想知道如何正确插入 html 实体作为星号。 Thank you for considering this!
感谢您考虑这一点!
I've removed some code for clarity.为了清楚起见,我删除了一些代码。
rating-list.component.ts评级-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;
}
}
rating-card.component.ts评级卡.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 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>
why don´t you just create a star-rating.component and do the stars with an *ngFor loop using angular syntax instead of messing around with underlying dom structure?为什么不直接创建一个 star-rating.component 并使用 *ngFor 循环使用 angular 语法而不是搞乱底层 dom 结构?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.