从模板访问子组件

在我们的模板中，我们可能发现自己需要访问由我们用来构建自己的组件的子组件提供的值。

最直接的例子可能是处理表单或输入：

app/app.component.html

  1. <section>
  2.   <form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  3.     <label for="name">Name</label>
  4.     <input type="text" name="name" id="name" ngModel>
  5.     <button type="submit">Submit</button>
  6.   </form>
  7.   Form Value: {{formValue}}
  8. </section>

app/app.component.ts

  1. import { Component } from '@angular/core';
  3. @Component({
  4.   selector: 'rio-app',
  5.   templateUrl: 'app/app.component.html'
  6. })
  7. export class AppComponent {
  8.   formValue = JSON.stringify({});
  10.   onSubmit (form: NgForm) {
  11.     this.formValue = JSON.stringify(form.value);
  12.   }
  13. }

View Example

这不是一个只有表单或输入的神奇功能，而是一种引用模板中子组件实例的方法。使用该引用，您可以访问该组件的公共属性和方法。

app/app.component.html

  1. <rio-profile #profile></rio-profile>
  2. My name is {{ profile.name }}

app/profile.component.ts

  1. @Component({
  2.   selector: 'rio-profile',
  3.   templateUrl: 'app/profile.component.html'
  4. })
  5. export class ProfileComponent {
  6.   name = 'John Doe';
  7. }

View Example

还有其他访问和连接子组件的方法，但是如果你只需要引用一个孩子的属性或方法，这可以是一个简单和直接的方法。