Угловой 2 Передача аргумента строки компоненту

Question

Моя цель - передать строковые аргументы компоненту. Пример. У меня есть компонент, который содержит и показывает заголовок и субтитры. Я хочу передать эти строки, когда устанавливаю селектор. Что-то вроде:

@Component({ 
    selector: 'title-subtitle', 
}) 

в HTML:

<title-subtitle title="My title" subtitle="My subtitle"></title-subtitle> 

Answer 1

Родитель компонент:

<title-subtitle [childInput]="parentInput"> 
</title-subtitle> 

private parentInput: any; 

---

ngOnInit() { 
    this.parentInput = 'Hello World'; 
} 

Детский компонент:

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

export class ChildComponent implements OnChanges, OnInit { 
    @Input() private childInput: any; 

    ngOnInit() { 
    // When the data is passed instantly, you can access it here. 
    // You can also use {{childInput}} in your HTML 
    console.log(this.childInput); 
    } 

    ngOnChanges(changes) { 
    // When the data is async : get the changes when they are ready 

    // Get @Input data when it's ready 
    if (changes.childInput) {  
     console.log(changes.childInput.currentValue); 
    } 
    } 
} 

Обратите внимание на именование свойств в родительском HTML.

N.B: Вам нужны только события OnInit и/или OnChanges, когда вам действительно нужно что-то делать с вашими данными (т. Е. Глубокое клонирование, ...). Если вы только отображаете его в своем HTML с интерполяцией, нет необходимости в событиях.

NB 2: Имейте в виде, что это ЖЕ ПРЕДМЕТ (тот же ссылка), который посылается ваш ребенок, что означает, что при обновлении свойства вашего объекта в вашем ChildComponent, изменения будут также влиять на родителях , Обычно вы клонируете свой объект, чтобы избежать такого поведения в событиях OnInit или OnChanges.

Answer 2

Если рассмотреть этот пример Hero он должен ответить на ваш вопрос

Обратите внимание на

<my-hero-detail [hero]="selectedHero"></my-hero-detail> 

на app.component.ts файл

Answer 3

Чтобы передать строку с помощью @input от родительского компонента до дочернего компонента есть два пути.

Если вы хотите передать строку,

<child-component childInput="child input"> </child-component> 

Если вы хотите передать переменную из родительского компонента дочернего компонента,

<child-component [childInput]="parentInput"> </child-component>