angular6 - 我可以在 ViewChildren 中使用 html 标记作为选择器吗

Question

我想让<p>模板中的所有内容都具有font-variant small-caps. 我可以通过htmltoViewChildren吗？我见过传递模板引用变量或组件的示例，但还没有看到传递给的选择器ViewChildren是html标签或css类的示例。

template: `<p>
  I am a static component
</p>
<p>
I am another para but I have an id (template reference variable) #pref. I got my blue color using ViewChild and Renderer2
</p>
<p>
  All paragraphs are small-caps because using ViewChildren and Renderer2, the style was set to bold
  </p>`

.ts 文件

import { Component,ViewChild, ViewChildren, QueryList,ElementRef,Renderer2,OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  @ViewChildren("p") paraList:QueryList<any>; /*I SUPPOSE I CANT DO THIS AS P IS INTERPRETED AS TEMPLATE REFERENCE VARIABLE AND NOT <P>*/
  constructor(private renderer:Renderer2){

  }

  ngAfterViewInit(){ //QueryList becomes available now
    this.paraList.forEach(para =>{this.renderer.addClass(para,'boldClass')})
  }

}

css

.boldClass{
  font-variant: small-caps;
}

标签： angular6