angular 指令渲染_Angular之 ng-content 进阶

阅读此文章需要掌握Angular组件的知识。本文所有的例子都可以在kingfolk/Angular-Playground找到。

简单的ng-content使用

ng-content可以创建类似于div span等内部可以插入元素的组件，比如下面的app-ng-content-simple他的作用和span一样

@Component({
    
  selector: 'app-ng-content-simple',
  template: '<ng-content></ng-content>',
  styleUrls: ['./ng-content-simple.component.sass']
})
export class NgContentSimpleComponent implements OnInit {
    

  constructor() {
     }

  ngOnInit() {
    
  }

}

// usage
<app-ng-content-simple>
  I am a simple ng content
</app-ng-content-simple>

利用select插入不同种类的内容

ng-content指令有一个select输入，使用方式如同css selector, 可以对包含的内容进行过滤展示。以下例子展示了标签，属性，css类选择性地展示内容。

@Component({
    
  selector: 'app-ng-content-select',