angular知识点--模板局部变量、@viewChild

通过局部变量、@viewChild实现数据交互

碎碎念：都是一些自己在学习过程中的一点体会，如果有什么不对的感谢大家指正一起学习！也希望不要说难听的话（毕竟是个心灵脆弱的女汉纸…）

---

获取引用两种方式
1.通过局部变量父组件获取子组件引用
  （局限性：局部变量只能在模板中使用，不能在父组件的类中使用）
2.通过@viewChild父组件获取子组件引用

---

通过局部变量父组件获取子组件引用
如下例：在父组件中的子组件(<test>)组件上定义一个局部变量“test”,用来获取子组件的实例引用，访问子组件的成员变量、方法。

1. 通过局部变量访问子组件的方法

   在父组件中的子组件<app-test>上定义了一个局部变量—“#test”，在父组件中通过“#test”访问子组件的show()方法

<app-test (click)="test.show()" #test></app-test>

子组件<app-test>HTML和ts

//html
<p (click)="show()">
    点击我~
</p>

//ts
export class TestComponent implements OnInit {
  font: string;

  constructor() { }

  ngOnInit() {
  }

  show() {
   this.font="我是子组件的点击事件";
  }

}

当点击父组件上子组件的click方法就能通过定义的变量（#test）来执行子组件的show()方法。如下图：

2. 通过局部变量访问子组件的变量
   同上获取子组件的show()方法一样，子组件中有一个变量‘fontTwo’，我们在父组件中拿到这个变量并显示

子组件<app-test>ts

export class TestComponent implements OnInit {

  font: string;
  fontTwo:string="我是子组件的变量";

  constructor() { }

  ngOnInit() {
  }

  show() {
  this.font="我是子组件的点击事件";
  }

}

父组件html
通过’test’变量直接插值显示了子组件的’fontTwo’变量

    <app-test (click)="test.show()" #test></app-test>
    <p>{{test.fontTwo}}</p>

如下图：在父组件中显示了通过局部变量显示的文字

---

通过@viewChild父组件获取子组件引用
父组件可以获取到子组件的读写权限

• 参数为类实例，表示父组件将绑定一个指令或者子组件实例
• 参数为字符串类型，表示将起到一个选择器的作用，相当于在父组件中绑定与一个模板局部变量

举例参数为类实例：
父组件html

<app-test (click)="clickDemo()"></app-test>

父组件ts
// 通过@viewChild装饰器将testcomponent子组件注入进来，并赋值给test变量，
用变量访问子组件的show()方法。最后页面实现的结果和通过局部变量一样。只是我们将处理的过程在父组件的ts中完成了。

export class HomeComponent implements OnInit {

  @ViewChild(TestComponent) test: TestComponent;

  constructor() { }

  ngOnInit() {
  }

  clickDemo() {
    this.test.show();
  }

}

子组件html、ts

//子组件html
<p (click)="show()">
    点击我~
</p>
<p>{{font}}</p>

//子组件ts
export class TestComponent implements OnInit {

  font: string;

  constructor() { }

  ngOnInit() {
  }

  show() {
  this.font="我是子组件的点击事件";
  }

}