zoukankan      html  css  js  c++  java
  • Angular ContentChild

    contentchild

    // 使用方法
    git clone https://git.oschina.net/mumu-osc/learn-component.git
    cd learn-component
    git pull origin contentchild
    npm install 
    ng serve
    
    <!-- test-content-child.component.html -->
    <div class="panel panel-primary">
      <div class="panel-heading">父组件</div>
      <div class="panel-body">
          <child-one>
            <h3>投影的标题</h3>
            <p>投影的底部</p>
            <child-two></child-two>
            <child-two></child-two>
            <child-two></child-two>
            <child-two></child-two>
            <child-two></child-two>
            <child-two></child-two>
            <child-two></child-two>
            <child-two></child-two>
          </child-one>
      </div>
    </div>
    
    <!-- child-one.component.html -->
    <div class="panel panel-primary">
      <div class="panel-heading">
        <ng-content select="h3"></ng-content>
      </div>
      <div class="panel-body">
        <ng-content select="child-two"></ng-content>
      </div>
      <div class="panel-footer">
        <ng-content select="p"></ng-content>
      </div>
    </div>
    
    // child-one.component.ts
    import { Component, ContentChild, ContentChildren, ElementRef, OnInit, QueryList } from '@angular/core';
    import { ChildTwoComponent } from '../child-two/child-two.component';
    
    @Component({
      selector: 'child-one',
      templateUrl: './child-one.component.html',
      styleUrls: ['./child-one.component.scss']
    })
    export class ChildOneComponent implements OnInit {
      // @ContentChild(ChildTwoComponent)
      // childTwo:ChildTwoComponent;
      @ContentChildren(ChildTwoComponent) childrenTwo:QueryList<ChildTwoComponent>;
      constructor() { }
    
      ngOnInit() {
      }
    
      ngAfterContentInit():void{
        // console.log(this.childTwo);
        this.childrenTwo.forEach((item)=>{
          console.log(item);
        });
      }
    }
    

    什么是ContentChild

    contentchild与viewchild作用非常相似,区别在于contentchild比viewchild多了一个布局功能

    比如以上代码中的p标签的内容,就显示在child-one组件的最底部

  • 相关阅读:
    「日常训练」More Cowbell(Codeforces Round #334 Div.2 B)
    「日常训练」Battle Over Cities
    「日常训练」湫湫系列故事——设计风景线(HDU-4514)
    「日常训练」Caterpillar(POJ-3310)
    python压缩解压文件
    python图像处理
    python删除文件或者目录
    python循环执行程序的装饰器
    python中logging模块的使用
    python中yield迭代器
  • 原文地址:https://www.cnblogs.com/zheng-chuang/p/7418833.html
Copyright © 2011-2022 走看看