Question

我正在尝试理解属性绑定，它一直很混乱，我能够解决我的控制台充满错误，但我无法弄清楚为什么我的绑定
的 app.component.html

<div class="container">
  <div class="row">
    <div class="col-xs-12">
        <app-game-control [childTitle]="parentSelector"></app-game-control>
      </div>
</div>

app.component.ts

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

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

  parentSelector = "This shall pass from parent to child" ;

}

游戏control.component.html

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

@Component({
  selector: 'app-game-control',
  templateUrl: './game-control.component.html',
  styleUrls: ['./game-control.component.css']
})
export class GameControlComponent implements OnInit {
@Input() childTitle:string ;
title= "Hello from child component";

  ngOnInit() {
  }
}

游戏control.component.html

<div class="row">
    <div class="col-xs-12">
      {{title}}
  </div>
</div>

我做错了什么？

Answer 1

一切都在您的代码中，唯一的是您不会显示您的＆＃34; childTitle＆＃34;完全输入。试试这个：

<强>游戏control.component.html

<div class="column">
    <div>
      <h1>Data from game-control component
      {{title}}
  </div>
  <div>
      <h1>Data from parent</h1>
      {{childTitle}}
  </div>
</div>

嵌套组件绑定为空

1 个答案: