【问题标题】:Manipulating a component's DOM elements in Angular在 Angular 中操作组件的 DOM 元素
【发布时间】:2021-01-07 13:45:14
【问题描述】:

我是 Angular 新手,我正在尝试根据该实例的输入数据来操作组件的 html 模板实例。我想取一个整数值并产生与您在星级评分系统中看到的相同数量的星星(与 html 实体 ★ 一样)。我有一个父组件“RatingList”,它动态生成一个包含星级的“RatingCard”(例如参见照片)。我能够动态创建“RatingCard”,并且在 ngAfterViewInit 期间,我正在尝试创建星级。我使用 selectRootElement 访问我想要放置星星的元素,但它似乎只获取“RatingCard”的第一个实例,然后将所有后续实例添加到该实例的星级。

我想知道在 RatingCard 实例中找到特定 html 标记然后更新它的正确方法是什么。我曾尝试使用 ViewChild 声明变量,但这似乎不起作用。我也想知道如何正确插入 html 实体作为明星。感谢您考虑这一点!

为了清楚起见,我删除了一些代码。

rating-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


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("&#9734;");
      
      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>

Image of what is currently displayed

【问题讨论】:

    标签: javascript html angular


    【解决方案1】:

    你为什么不直接创建一个 star-rating.component 并使用 angular 语法通过 *ngFor 循环来做星星,而不是搞乱底层的 dom 结构?

    【讨论】: