Pass a string to component from another component tpl in angular2

Question

Is it possible to pass a plain string from a component template to another component? eg..

Component 1 tpl:

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

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

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

The current result is in the component ts the @input is always undefined.

Answer 1

也将您的switchcase语句用引号引起来。

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

Answer 2

It's undefined in constructor because it's not there yet. Put this console.log in ngOnInit() method. It should be visible there.

also the markup is:

*ngSwitchCase="expression"

completed-survey is not an expression. try:

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

Answer 3

I suffered with this exact problem early on. You need to do: messageType="completed-survey" instead of [messageType]="'completed-survey'"