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

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

0 голосов
/ 07 декабря 2018

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

У меня есть основное приложение и дочерний компонент.В app.component.ts у меня есть тестовая переменная.Я хочу передать эту переменную от 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...
}

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

Ответы [ 5 ]

0 голосов
/ 07 декабря 2018

Привязка свойств и привязка событий - две основные концепции в angular.

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

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

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

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

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

0 голосов
/ 07 декабря 2018

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

Шаблон родительского компонента: 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 }}
0 голосов
/ 07 декабря 2018

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

<app-child [fromParent]="test"></app-child>
0 голосов
/ 07 декабря 2018

В вашем 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...
}
0 голосов
/ 07 декабря 2018

Просто поместите свойство в дочерний селектор в вашем 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);
    }
}
...