將字符串傳遞給另一個組件中的組件tpl in angular2

是否可以將組件模板中的純字符串傳遞給另一個組件？例如..將字符串傳遞給另一個組件中的組件tpl in angular2

組分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中@輸入始終未定義。

來源

2016-11-18 John

它在構造函數中是未定義的，因爲它尚未存在。把這個console.log放在ngOnInit（）方法中。它應該在那裏可見。

也標記爲：

*ngSwitchCase="expression"

完成調查不是表達式。嘗試：

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

來源

2016-11-18 14:37:20 kit

將您的switchcase語句也包含在引號中。

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

來源

2016-11-18 14:35:54 LLai

我在早期遭受了這個確切的問題。你需要做的是：messageType =「completed-survey」，而不是[messageType] =「'completed-survey'」

來源

2016-11-18 14:40:25

ahh right ok！感謝捆綁！這麼多新的sytax ..仍然試圖塞滿這一切：D – John

其實...原來，這只是在交換機中的字符串的雙重封閉丟失 – John

很高興你得到它解決。 –

將字符串傳遞給另一個組件中的組件tpl in angular2

回答

相關問題