ввод angualr не дает результата. в родительском компоненте

Question

родитель. html

   <div>
        <p>form the parent</p>
        <app-child>[value]="from the parent"</app-child>
    </div>

---

child. html

<p>child works!</p>
<h1>{{value}}</h1>

---

child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {


  @Input() value : string;

  constructor() { 

    }



  ngOnInit() {
    console.log(this.value);
  }

}

ввод angualr не дает результата. в родительском компоненте. хотя я использовал значение в дочернем компоненте.

Answer 1

Это потому, что вы используете неправильный синтаксис для передачи входных значений компоненту - вы указываете входное значение внутри тегов компонента, поэтому Angular будет обрабатывать его так, как если бы вы ' пытается передать HTML компоненту <ng-content>. Вместо этого вы должны указать его, как если бы вы указали атрибут в теге HTML:

<div>
  <p>form the parent</p>
  <app-child [value]="from the parent"></app-child>
</div>

Кроме того, вы не должны заключать атрибут value в квадратные скобки, так как Angular будет Рассматривайте его так, как будто у вас есть свойство в шаблоне вашего компонента с именем from the parent. Но поскольку в вашем компоненте нет такого свойства, оно может отображаться некорректно. Вместо этого вам следует либо заключить значение атрибута в одинарные кавычки, либо снять квадратные скобки:

<div>
  <p>form the parent</p>
  <app-child value="from the parent"></app-child>
</div>

Или:

<div>
  <p>form the parent</p>
  <app-child [value]="'from the parent'"></app-child>
</div>

Для получения дополнительной информации ознакомьтесь с Контекстный раздел выражения документа Angular с синтаксисом шаблона .

Answer 2

атрибут value , упомянутый из дочерних элементов app, который должен находиться внутри элемента.

<div>
    <p>form the parent</p>
    <app-child [value]="from the parent"></app-child>
</div>