Javascript angular中的双向数据绑定不起作用

我正在尝试在角度组件中实现双向数据绑定。当前它处于父子模式

parent.component.html

child.component.html

当我从子组件更改它时，标题也应该在父组件上实现。另外，我不知道为什么父代码无缘无故地在循环中运行。我在html中添加文本只是为了测试它是否在两个组件中都被更新，但它只在子组件中更新，而不是在父组件中更新。我来自angularjs背景，双向数据绑定在其中无缝工作。我只是不知道我做错了什么（我知道这是一个noob问题）

---

此处演示：

双向数据绑定仅适用于模板-组件交互

如果要将标题更改发送到父组件，应执行以下操作：

父模板和组件：

<child [title]="title" (pushTitle)="onTitleChange(value)"></child>
<span style="color: red">This is parent component {{title}}</span>

onTitleChange(value) {
    this.title = value;
}

---

现在，每次在输入字段中键入内容时，您都会看到组件模型中的更改，或者以编程方式更改inputModel值时，您会看到HTML输入中的更改。

还有另一种方法可以实现相同的更改

@Input() title: any;
@Output() titleChange: EventEmitter<any> = new EventEmitter<any>();

changeValue() {
  this.title= !title;
  this.titleChange.emit(this.title);
}

@Input（）标题：任意；
@Output（）titleChange:EventEmitter关于双向绑定
您正在以某种方式使用双向绑定创建一个无限的更新周期。这将导致无限循环，并最终导致堆栈溢出


为了解决这一问题，您最好向
标题更改
事件添加一些逻辑（这是香蕉盒子语法的香蕉部分，即
[（title）]
中的parens部分，它将自动转换为名为
标题更改
的事件发射器）。
例如，如果父组件的
title
属性等于子组件发出的更新，则可能希望跳过更新该属性

这意味着您应该将
[（title）]
分为
（titleChange）=“titleChange（$event）”
和
[title]=“title”
。第一部分允许您将更新后的标题作为
$event
传递，然后在函数
titleChanged
中对其进行处理（在本例中，名称是任意的）。第二部分的作用是子组件接收父组件的
title
属性的更新

另一种常见模式是将
title
设为private（通常带有前缀下划线，例如
\u title
），然后添加getter
get title（）{返回此属性。_title；}
，以便（1）封装此属性并（2）添加一些处理。
在您的情况下，这是不需要的，但也不会造成伤害。；-）


这里有一个包含这些更改的列表。
谢谢。在什么情况下我可以使用[（标题）]呢？编辑答案。如果@ritaj answer让你满意，你应该将他的答案标记为正确。谢谢，这没道理。您将得到一个错误
标题未定义
。让我创建一个stackblitz:）@ritaj请看一下，请重新阅读您给出的答案。它使用未定义的变量。除此之外，是的，这肯定有效。干得好@RukshanDangalla，stackblitz密码太棒了！我只有一个问题，我不能只使用[（fontSizePx）]=“fontSizePx”，并将输入变量指定为fontSizePx吗？不使用大小？简单的方法是从
@Output（）pushTitle=neweventemitter（）更新
到
@Output（）titleChange=neweventemitter（）
<span style="color: blue">This is child component {{title}}</span>

@Input() title: any;
  @Output() pushTitle = new EventEmitter();

  constructor() { }

  ngOnInit() {
    this.title = 'new title';
    this.pushTitle.emit(this.title);
  }

<child [title]="title" (pushTitle)="onTitleChange(value)"></child>
<span style="color: red">This is parent component {{title}}</span>

onTitleChange(value) {
    this.title = value;
}

 <input [(ngModel)]="inputModel">

inputModel: string;

@Input() title: any;
@Output() titleChange: EventEmitter<any> = new EventEmitter<any>();

changeValue() {
  this.title= !title;
  this.titleChange.emit(this.title);
}