将字符串从angular2中另一个组件tpl传递给组件

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>

当前结果在ts中，@ input始终未定义。

Answer 1

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

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

Answer 2

在构造函数中尚未定义，因为它尚不存在。 将此console.log放入ngOnInit（）方法。 它应该在那里可见。

标记也是：

*ngSwitchCase="expression"

完成调查不是一种表达。 尝试：

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

Answer 3

我很早就遭受了这个确切的问题。 您需要执行以下操作：messageType =“ completed-survey”而不是[messageType] =“'completed-survey'”