將字符串從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'”