É tão fácil como rodear o texto com aspas duplas, assim:

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

Se usar parêntesis [] o Angular usa a ligação à propriedade e espera receber uma expressão dentro das aspas e procura uma propriedade chamada 'Blue32' da sua classe de componentes ou uma variável dentro do modelo.

Se quiser passar o texto como um valor para o componente-filho, pode passá-lo assim:

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

Ou

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

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

@Component({})
export class ChildComponent {

    @Input()
    childProperty: string;

}

Esta classe angular pode fazer o truque para atributos estáticos: 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')
}

Partilhar o que funcionou comigo.

Adicionar uma entrada à aplicação Angular 4

• parent-component
• child-component

Queríamos passar algum valor de parent-component para child-component i.e. um @Input de parent-component.html para child-component.ts. Segue-se um exemplo que explica a implementação:

parent-component.html parece isto:

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

parent-component.ts parece isto:

  
  class ParentComponent {

  someInputValue = 'Some Input Value';

}

child-component.html parece isto:

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

child-component.ts parece isto:

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
  }
}

Repare que o valor do valor @Input está disponível dentro ngOnInit() e não dentro constructor().

Comportamento de referência dos objectos em Angular 2 / 4

Em Javascript, os objectos são armazenados como referências .

Este comportamento EXACTO pode ser re-produzido com a ajuda do Angular 2 / 4. Segue-se um exemplo que explica a implementação:

parent-component.ts aparência assim:

  
  class ParentComponent {

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

}

parent-component.html parece isto:

  
{{someInputValue.input}}

child-component.html parece isto:

Some Input Value {{someInputValue}}
change input

child-component.ts parece isto:

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";
  }
}

A função changeInput() irá alterar o valor de someInputValue dentro de ambos.ChildComponent & ParentComponent por causa da referência deles. Desde então, someInputValue é referenciado a partir de ParentComponent's someInputValue objeto - a alteração no ChildComponent's someInputValue objeto altera o valor de ParentComponent's someInputValue objeto. ISTO NÃO ESTÁ CORRECTO. Referência nunca será mudado.

Talvez pareça um martelo , mas pode colocar a entrada embrulhada num objecto como este:

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

E muda de classe

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

Tem de importar input como este no topo do componente Infantil

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

Quando está a fazer uso de @Input para o angular interaction.It é sempre a abordagem preferida para passar os dados do pai para o filho no objeto JSON, aparentemente ele não restringe pela equipe @Angular a usar variável local ou variável estática.

No contexto para aceder ao valor do componente infantil, utilize ngOnInit () {} ciclo angular de vida independentemente do construtor.

Quando eu tinha este problema, havia na verdade apenas um erro de compilação que eu tinha que corrigir primeiro (dependência circular necessária resolvida).