7 掌控子元素

1 代码结构

 

 

 

2 myc02.component.html

<p>myc02 works!</p>

<h4>{{name}}</h4>
<h4>{{age}}</h4>

3 myc02.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-myc02',
  templateUrl: './myc02.component.html',
  styleUrls: ['./myc02.component.css']
})
export class Myc02Component implements OnInit {
  name = '我是myc02';
  age = 22;

  show() {
    alert("我是myc02");
  }
  constructor() { }

  ngOnInit(): void {
  }

}

4 app.component.html

<button (click)="change()">修改第一个myc02的 name 值</button>

<!--给要掌控的子组件一个唯一标识：类似 id="xxx"-->
<!--简化写法：语法糖 类似css #代替了id-->
<app-myc02 #myc02></app-myc02>
<app-myc02></app-myc02>
<app-myc02></app-myc02>

5 app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Myc02Component } from './myc02/myc02.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ngPro';

  //查看子组件中#myc02的哪个组件
  //查看子组件中#myc02的哪个组件

  @ViewChild('myc02')
  test!: Myc02Component;
  change() {
    //如何在代码中，拿到子组件的索引
    console.log(this.test)

    //修改abc的name属性
    this.test.name = '你是第一个孩子！！！';
    this.test.age += 10;

    this.test.show();
  }
}

6 运行效果