javascript - change - angular title

Angular 2 Component @Input no funciona

Question

Estoy atascado en tratar de pasar un valor de propiedad en mi componente. Por lo que he leído, todo parece correcto. Pero aún no funciona. El valor de mi prueba se muestra en la pantalla y en la consola como nulo. :(

Este es mi componente de prueba:

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

Así es como estoy llamando al componente desde la página principal.

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

Cuando el renderizado de la página es el valor de prueba está vacío. Solo veo ''Valor de prueba:''.

En lugar de ''Valor de prueba: Blue32''.

Answer 1

Compartiendo lo que funcionó para mí:

Agregar una entrada a la aplicación Angular 4

Asumiendo que tenemos 2 componentes:

• parent-component
• child-component

Queríamos pasar algún valor de parent-component a parent-component child-component es decir, un @Input de parent-component.html a child-component.ts . A continuación se muestra un ejemplo que explica la implementación:

parent-component.html tiene este aspecto:

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

parent-component.ts tiene este aspecto:

  
  class ParentComponent {

  someInputValue = ''Some Input Value'';

}

child-component.html tiene este aspecto:

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

child-component.ts ve así:

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

Observe que el valor del valor @Input está disponible dentro de ngOnInit() y no dentro del constructor() .

Comportamiento de referencia de objetos en Angular 2/4

En Javascript, los objetos se almacenan como referencias .

Este comportamiento exacto se puede reproducir con la ayuda de Angular 2 / 4. A continuación se muestra un ejemplo que explica la implementación:

parent-component.ts tiene este aspecto:

  
  class ParentComponent {

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

}

parent-component.html tiene este aspecto:

  
{{someInputValue.input}}

child-component.html tiene este aspecto:

Some Input Value {{someInputValue}}

change input

child-component.ts ve así:

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

La función changeInput() cambiará el valor de someInputValue dentro de ChildComponent y ParentComponent debido a su referencia. Dado que se hace referencia a ParentComponent desde el objeto someInputValue : el cambio en el objeto someInputValue cambia el valor del objeto someInputValue . ESTO NO ES CORRECTO . Las referencias nunca serán cambiadas.

Answer 2

Creo que el problema aquí podría tener que ver con el ciclo de vida de la página. Porque dentro del constructor el valor de this.test es nulo. Pero si agrego un botón a la plantilla vinculada a una función que empuja el valor a la consola (igual que estoy haciendo en el constructor) this.test realmente tendrá un valor.

Answer 3

Cuando está utilizando @Input para la interacción angular. Siempre es preferible el enfoque para pasar los datos de padre a hijo en el objeto JSON, aparentemente el equipo de @Angular no restringe el uso de variables locales o variables estáticas.

En contexto para acceder al valor en el componente hijo, utilice el ciclo de enlace de vida angular ngOnInit () {} independientemente del constructor.

Eso te ayudará. Aclamaciones.

Answer 4

Es tan fácil como rodear la cadena con comillas dobles, como esta:

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

Answer 5

Esta clase angular podría ser el truco para los 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'')
}

Answer 6

Si usa corchetes [], Angular usa el enlace de propiedad y espera recibir una 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 desea pasar una cadena como un valor al componente secundario, puede pasarlo así:

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

o

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

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

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

@Component({})
export class ChildComponent {

    @Input()
    childProperty: string;

}

Answer 7

Tal vez parezca un martillo , pero puede poner la entrada envuelta en un objeto como este:

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

y cambia tu clase

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

Answer 8

Tienes cuatro cosas que puedo notar:

• Está pasando una entrada en el componente raíz, que no funcionará.
• Como @alexpods mencionó, está utilizando CamelCase. Usted no debe.
• Está pasando una expresión en lugar de una cadena a través de [test] . Eso significa que angular2 está buscando una variable llamada Blue32 lugar de pasar una cadena sin Blue32 .
• Estás usando el constructor. Eso no funcionará, debe ser después de que la vista se haya inicializado . Las propiedades enlazadas a datos se han inicializado (consulte los 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 : `<childcmp [test]="''Blue32''"></childcmp>`
    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 corrigí 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.

Answer 9

tienes que importar entradas como esta en la parte superior del componente hijo

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