Передача строки в компонент из другого компонента tpl в angular2

Question

Можно ли передать простую строку из шаблона компонента в другой компонент? например ..

Компонент 1 TPL:

<survey-step-complete-msg [messageType]="'completed-survey'"></survey-step-complete-msg> 

Компонент 2 .ts

import {Component, Input} from '@angular/core'; 
@Component({ 
    selector: 'survey-step-complete-msg', 
    templateUrl: '../../../../public/template/topic/survey-step-complete-msg.html' 
}) 
export class SurveyStepCompleteMsgComponent { 
    @Input() messageType; 
    constructor(){ 
     console.log(this.messageType); 
    } 
} 

Компонент 2 TPL:

<div [ngSwitch]="messageType"> 

    <p *ngSwitchCase="completed-survey">Thanks</p> 
    <p *ngSwitchCase="survey-step-required-fields-missing">Stuff missing</p> 
    <p *ngSwitchCase="survey-required-fields-missing">Stuff missing</p> 
    <p *ngSwitchCase="survey-thanks-now-save">Thanks, don't forget to save.</p> 

</div> 

Текущий результат находится в компоненте Т.С. @ вход всегда не определен.

Answer 1

Это не определено в конструкторе, потому что его еще нет. Поместите этот console.log в метод ngOnInit(). Там должно быть видно.

также разметка:

*ngSwitchCase="expression" 

завершены-опрос не является выражением. попробуйте:

<p *ngSwitchCase="'completed-survey'">Thanks</p> 

Answer 2

Оберните свои операторы switchcase в кавычки.

<p *ngSwitchCase="'completed-survey'">Thanks</p> 

Answer 3

У меня была эта точная проблема на ранней стадии. Вам нужно сделать: messageType = «завершен-опрос» вместо [messageType] = «« завершен-опрос »»