Ответ 1

У вас есть четыре вещи, которые я могу отметить:

• Вы передаете вход в корневой компонент, который не будет работать.
• Как упоминалось в @alexpods, вы используете CamelCase. Вы не должны.
• Вы передаете выражение вместо строки через [test]. Это означает, что angular2 ищет переменную с именем Blue32 вместо передачи необработанной строки.
• Вы используете конструктор. Это не сработает, это должно быть после инициализации представления . Свойства привязанных данных были инициализированы (см. Docs для 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.

Update

Я вижу, что люди до сих пор доходят до этого ответа, поэтому я обновил plnkr до бета-версии 1, и я исправил одну точку объяснения: вы можете получить доступ к входам в ngAfterViewInit, но вы можете получить к ним доступ ранее в жизненном цикле в ngOnInit.

Ответ 2

Это так просто, как заключить строку в двойные кавычки, например так:

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

Ответ 3

Этот класс angular может сделать трюк для статических атрибутов: 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')
}

Ответ 4

Если вы используете скобки [], 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;

}

Ответ 5

Я считаю, что проблема здесь может быть связана с жизненным циклом страницы. Поскольку внутри конструктора значение this.test равно null. Но если я добавлю кнопку к шаблону, связанному с функцией, которая подталкивает значение к консоли (то же самое, что я делаю в конструкторе) this.test действительно будет иметь значение.

Ответ 6

Может выглядеть как молот, но вы можете поместить ввод, завернутый в объект следующим образом:

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

и измените свой класс

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

Ответ 7

Поделиться тем, что сработало для меня:

Добавление ввода в приложение 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}}

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 someInputValue объект - изменение в ChildComponent someInputValue объекта изменяет значение ParentComponent someInputValue объект. ЭТО НЕ ПРАВИЛЬНО. Ссылки никогда не будут изменены.

Ответ 8

вам нужно импортировать входные данные, подобные этому в верхней части дочернего компонента

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

Ответ 9

Когда вы используете @Input для взаимодействия angular. Всегда предпочтительный подход для передачи данных от родителя к дочернему объекту в объекте JSON, по-видимому, он не ограничивает @Angular Team для использования локальных переменная или статическая переменная.

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

Это поможет вам. Приветствия.