Понимание @input - от родителя к ребенку

Question

Я пытаюсь выучить Angular, и теперь я на стадии @Input.

У меня есть основное приложение и дочерний компонент. В app.component у меня есть тестовая переменная. Я хочу передать эту переменную из app.component.ts в child.component.ts.

// app.component.ts:
export class AppComponent {
    test = 10;
}  

// child.component.ts:
export class ChildComponent {
    @Input() fromParent: number;
    childVar = fromParent + 5;

    show() {
        console.log(this.childVar);
    } //this should to show 15 in console...
}

Теперь, как я могу это сделать?

Answer 1

Привязка свойств и привязка событий являются двумя основными понятиями в угловых.

Компоненты и директивы могут рассматриваться как определяющие ваши пользовательские элементы и атрибуты соответственно. Например: h1 - это тег, который уже определен в HTML, а app-root - нет. Таким образом, мы можем рассматривать угловой компонент как способ создания пользовательского элемента и директиву как пользовательский атрибут. (теперь)

Атрибут / тег становятся дочерними для другого, если он используется внутри html компонента другого тега.

Ребенок может передать некоторые данные родителю через привязку события.

Родитель может передать некоторые данные в привязку дочернего свойства viz.

Должен быть какой-то способ сказать угловому компилятору, что дочерний элемент (в шаблоне) может обращаться к переменной внутри дочернего элемента, чтобы обозначить, что мы используем @Input() для свойства.

Answer 2

Ниже вы можете найти пример, который иллюстрирует механизм, позволяющий родительскому компоненту связывать свойства, к которым может иметь доступ дочерний компонент.

Шаблон родительского компонента: parent.component.html

<child-component 
    [fromParent]="fromParent">
</child-component>

Класс родительского компонента: parent.component.ts

export class ParentComponent {
  fromParent: string = 'String from parent';
}

Класс дочернего компонента: child.component.ts

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

//...

export class ChildComponent {
  @Input() fromParent: string;
}

Шаблон дочернего компонента: child.component.html

String from parent: {{ fromParent }}

Answer 3

В вашем app.component.html Вы называете свой дочерний компонент selector (при условии, что это child-app):

<child-app></child-app>

Затем добавьте то, что объявлено как @input() к нему и привязать его к значению в AppComponent (который test):

<child-app [fromParent]="test" ></child-app>

Наконец, вы должны рефакторинг вашего фрагмента:

****child.component.ts:****

export class ChildComponent { // Here is not AppComponent
    @Input() fromParent: number;
    childvar: number;


    show() {
        this.childVar = this.fromParent + 5; // this op should be inside a method 
        console.log(this.childVar);
    } //this should to show 15 in console...
}

Answer 4

Просто поместите свойство в дочерний селектор в вашем app.component.html следующим образом:

<!-- replace element selector with yours -->
<app-child [fromParent]="test"></app-child>

И вы можете при желании реализовать интерфейс OnChanges в вашем child.component.ts, чтобы он был -

export class ChildComponent implements OnChanges {
    @Input() fromParent: number;
    childVar = fromParent + 5;

    ngOnChanges() { // this will be called automatically when updated by parent.
        console.log(this.childVar);
    }

    show() { // called on demand
        console.log(this.childVar);
    }
}

Answer 5

Всякий раз, когда вы размещаете дочерний компонент, вы инициализируете его переменную. Итак, где-то в родительском шаблоне вы делаете это:

<app-child [fromParent]="test"></app-child>

Answer 6

*So what if the apples component is almost the same for each instance, but we need it to display a different description for each instance? We use Input .*  

  // app.component.html
<app-apple [description]="appleDescription"></app-apple>

appleDescription может быть любым свойством класса внутри app.component.html.

// apple.component.ts
import { Component, OnInit, Input } from '@angular/core';
...
export class AppleComponent implements OnInit {
   @Input() description: string;
...

Теперь описание передается тем, кем является родительский компонент. В данном случае это app.component.html. Любое значение может быть передано в [описание], а описание может использоваться в любом месте внутри apple.component.html или apple.component.ts, как если бы это было обычное свойство класса, которое следует за обычным обнаружением изменений.

// apple.component.html
{{ description || 'Nothing has been typed yet...' }}