父子关系中的数据绑定问题，

Question

我是angular 6的初学者，目前面临数据绑定问题。我创建了一个测试项目，该项目显示的标题带有与父母和孩子的关系的数据绑定，但是它不起作用...任何人都可以帮我这个忙吗？

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{title}}</h1> //need to print child components title variable 
                       //inside parent template
    <childcomponent>Child component title is: {{title}}</childcomponent>
    `
    //and also inside the child componets selector
})
export class AppComponent {
  title = 'Parent component';
}

---

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

@Component({
  selector: 'app-root',
  template: `<p>child component works</p> `
})
export class ChildComponent {
  title = 'Child component';
}

Answer 1

因此，您想要实现的是将数据从子组件传递到父组件。下面的解决方案是借助“局部变量”完成的。

父项：

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{child.title}}</h1>
    <childcomponent #child></childcomponent>
   `
})
export class AppComponent {
  title = 'Parent component';
}

---

子组件：

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

@Component({
  selector: 'childcomponent',
  template: `<p>Child component title is: {{title}}</p> `
})
export class ChildComponent {
  title = 'Child component';
}

---

因此，输出将如下所示：

您还可以使用另外2种方法获得相同的结果：
1.家长正在听孩子的组件事件。
2. Parent使用@ViewChild获得对子组件的引用。

Answer 2

我真的不明白这里的目的，您可以直接显示标题而不直接使用子组件。

如果您仍然希望传递给子组件，则应使用@input EventEmitter机制将数据从父代传递给子组件

STACKBLITZ DEMO