Я застряг у спробі передати значення властивості у свій компонент. З прочитаного все виглядає правильно. Але це все ще не працює. Моє тестове значення отримує вихід на екран та консоль як нульовий. :(

Це мій компонент тесту:

import {Component, Input} from 'angular2/angular2';

@Component({
    selector: 'TestCmp',
    template: `Test Value : {{test}}`
})

export class TestCmp {

    @Input() test: string;

    constructor()
    {
        console.log('This if the value for user-id: ' + this.test);
    }
}

Ось як я викликаю компонент з батьківської сторінки.

<TestCmp [test]='Blue32'></TestCmp>

Коли візуалізація сторінки, тестове значення порожнє. Я бачу лише "Значення тесту:".

Замість "Тестове значення: Blue32".

У вас є чотири речі, які я можу зазначити:

• Ви передаєте вхідні дані в кореневий компонент, що не буде працювати.
• Як згадував @alexpods, ви використовуєте CamelCase. Ти не повинен.
• Ви передаєте вираз замість рядка [test]. Це означає, що angular2 шукає змінну з іменем, Blue32а не передає необроблений рядок.
• Ви використовуєте конструктор. Це не буде працювати, це має бути після ініціалізації подання властивостей, пов’язаних із даними (див. Документи для OnInit ).

Тож з кількома виправленнями це має спрацювати

Приклад оновлено до бета-версії 1

import {Component, Input} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

@Component({
  selector : 'childcmp',
  template: `Test Value : {{test}}`
})
class ChildCmp {
    @Input() test: string;
    ngOnInit() {
        console.log('This if the value for user-id: ' + this.test);
    }
}

@Component({
    selector: 'testcmp',
    template : `<childcmp [test]="'Blue32'"></childcmp>`
    directives : [ChildCmp]
})
export class TestCmp {}

bootstrap(TestCmp);

Див. Цей plnkr як приклад.

Оновлення

Я бачу, що люди все ще приходять до цієї відповіді, тому я оновив plnkr до бета-версії 1 і виправив один пункт пояснення: Ви можете отримати доступ до входів у ngAfterViewInit, але ви можете отримати доступ до них раніше протягом життєвого циклу в ngOnInit.

Це так просто, як оточити рядок подвійними лапками, наприклад:

<TestCmp [test]="'Blue32'"></TestCmp>

Якщо ви використовуєте дужки [], Angular використовує прив'язку властивостей і очікує отримати вираз усередині лапок, і він шукає властивість під назвою 'Blue32' від вашого класу компонентів або змінну всередині шаблону.

Якщо ви хочете передати рядок як значення дочірньому компоненту, ви можете передати його так:

<child-component childProperty='passing string'></child-component>

або

<child-component [childProperty]="'note double quotes'"></child-component>

А потім перенесіть це до child.component.ts так:

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

@Component({})
export class ChildComponent {

    @Input()
    childProperty: string;

}

Цей кутовий клас може зробити фокус для статичних атрибутів: ElementRef https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

import {ElementRef} from 'angular2/core'

constructor(elementRef: ElementRef) {
    elementRef.nativeElement.getAttribute('api')
}

Я вважаю, що проблема тут може бути пов’язана із життєвим циклом сторінки. Оскільки всередині конструктора значення this.test є нульовим. Але якщо я додаю кнопку до шаблону, зв’язану з функцією, яка штовхає значення на консоль (те саме, що я роблю в конструкторі), this.test насправді матиме значення.

Поділитися тим, що мені вдалося:

Додавання вхідних даних до програми Angular 4

Припускаючи, що у нас є 2 компоненти:

• parent-component
• child-component

Ми хотіли передати якесь значення від parent-componentдо child-componentтобто тобто @Inputвід parent-component.htmlдо child-component.ts. Нижче наведено приклад, який пояснює реалізацію:

parent-component.html виглядає так:

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

parent-component.ts виглядає так:

  
  class ParentComponent {

  someInputValue = 'Some Input Value';

}

child-component.html виглядає так:

<p>Some Input Value {{someInputValue}}</p>

child-component.ts виглядає так:

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

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

  @Input() someInputValue: String = "Some default value";

  @Input()
  set setSomeInputValue(val) {
    this.someInputValue += " modified";
  }

  constructor() {
    console.log('someInputValue in constructor ************** ', this.someInputValue); //someInputValue in constructor ************** undefined
  }

  ngOnInit() {
    console.log('someInputValue  in ngOnInit ************** ', this.someInputValue); //someInputValue  in ngOnInit ************** Some Input Value
  }
}

Зверніть увагу, що значення @Inputзначення доступне всередині, ngOnInit()а не всередині constructor().

Поведінка об'єктів у Angular 2/4

У Javascript об'єкти зберігаються як посилання .

Цю точну поведінку можна відтворити за допомогою Angular 2 / 4. Нижче наведено приклад, який пояснює реалізацію:

parent-component.ts виглядає так:

  
  class ParentComponent {

  someInputValue = {input: 'Some Input Value'};

}

parent-component.html виглядає так:

  
{{someInputValue.input}}

child-component.html виглядає так:

Some Input Value {{someInputValue}}
change input

child-component.ts виглядає так:

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

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

  @Input() someInputValue = {input:"Some default value"};

  @Input()
  set setSomeInputValue(val) {
    this.someInputValue.input += " set from setter";
  }

  constructor() {
    console.log('someInputValue in constructor ************** ', this.someInputValue); //someInputValue in constructor ************** undefined
  }

  ngOnInit() {
    console.log('someInputValue  in ngOnInit ************** ', this.someInputValue); //someInputValue  in ngOnInit ************** Some Input Value
  }

  changeInput(){
    this.someInputValue.input += " changed";
  }
}

Функція changeInput()змінить значення someInputValueвсередині обох ChildComponent& ParentComponentчерез їх посилання. Так, someInputValueпосилаються з ParentComponent«S someInputValue об'єкта - зміна ChildComponent» s someInputValue об'єкта змінює значення ParentComponent«s someInputValue об'єкта . ЦЕ НЕ ПРАВИЛЬНО . Посилання ніколи не змінюються.

Можливо, схожий на молоток , але ви можете покласти введення, загорнуте на такий об’єкт:

<TestCmp [test]='{color: 'Blue32'}'></TestCmp>

і змінити свій клас

class ChildCmp {
    @Input() test: any;
    ngOnInit() {
        console.log('This if the value for user-id: ' + this.test);
    }
}

вам потрібно імпортувати введення, як це, у верхній частині дочірнього компонента

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

Коли ви використовуєте @Input для кутової взаємодії. Завжди є кращим підходом передавати дані від батьків дочірньому об'єкту JSON, мабуть, це не обмежує команда @Angular використовувати локальну змінну або статичну змінну.

У контексті доступу до значення дочірнього компонента використовуйте ngOnInit () {} кутовий життєвий цикл підключення незалежно від конструктора.

Це вам допоможе. Ура.

Коли у мене виникла ця проблема, насправді була просто помилка компіляції, яку мені довелося виправити спочатку (циркулярна залежність потребувала вирішення).