Angular 2 Componente @Input no funciona

Presta atención porque en esta noticia vas a encontrar la respuesta que buscas.Esta noticia ha sido analizado por nuestros expertos para asegurar la calidad y veracidad de nuestro contenido.

Solución:

Tienes cuatro cosas que puedo señalar:

• Está pasando una entrada en el componente raíz, que no funcionará.
• Como mencionó @alexpods, está utilizando CamelCase. Usted no debe.
• Está pasando una expresión en lugar de una string mediante [test]. Eso significa que angular2 está buscando una variable llamada Blue32 en lugar de pasar un crudo string.
• Estás usando el constructor. Eso no funcionará, debe ser después de la la vista ha sido inicializada Las propiedades enlazadas a datos se han inicializado (ver documentos para OnInit).

Entonces, con algunas correcciones, debería funcionar.

Ejemplo actualizado a beta 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 : ``
    directives : [ChildCmp]
)
export class TestCmp 

bootstrap(TestCmp);

Vea este plnkr como un ejemplo.

Actualizar

Veo que las personas aún llegan a esta respuesta, así que actualicé el plnkr a beta 1 y corregí un punto en la explicación: puede acceder a las entradas en ngAfterViewInit, pero puede acceder a ellas antes en el ciclo de vida dentro de ngOnInit.

Es tan fácil como rodear el string con comillas dobles, así:

Si usa corchetes [] el Angular usa el enlace de propiedad y espera recibir un expresión dentro de las comillas y busca una propiedad llamada ‘Blue32’ de su clase de componente o una variable dentro de la plantilla.

si quieres pasar string como un valor para el componente secundario, puede pasarlo así:

o

Y luego llévalo a child.component.ts así:

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

@Component()
export class ChildComponent 

    @Input()
    childProperty: string;

Ten en cuenta compartir esta reseña si si solucionó tu problema.

---

---

Utiliza Nuestro Buscador