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"

Answer 3

我很早就遇到了这个问题。您需要这样做：messageType =＆＃34; completed-survey＆＃34;而不是[messageType] =＆＃34;＆＃39;完成调查＆＃39;＆＃34;

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

3 个答案: