Question

我正试图在Angular 5中将模型从一个组件传递到另一个组件。

我有一个基页，其中包含另外两个页面。 html看起来像这样：

<div [hidden]="!loading">
<page-one *ngIf="!showPageTwo"
             (model)="model"
             (next)="showPageTwo = true">
</page-one>
<page-two *ngIf="showPageTwo"
           [model]="model">
</page-two>

第一页看起来像这样：

import section....

@Component({
selector: 'page-one',
templateUrl: './pageOneComponent.html'
})
export class PageOneComponent {

public model: ExampleViewModel;
public otherModel: NotTheModelThatIsImportantHere;

@Output('next') onNextEmitter = new EventEmitter<void>();
@Output("model") modelEmitter = new EventEmitter<ExampleViewModel>();

contructor ....

onSubmit() {
    this.exampleService.doSomething(this.otherModel).then(response => {
        this.model = response;
        this.modelEmitter.emit(this.model);
        this.onNextEmitter.emit();                
    });
}

第二页看起来像这样：

imports...

@Component({
selector: 'page-two',
templateUrl: './pageTwoComponent.html'
})

export class PageTwoComponent {
public copyOfModel: ExampleViewModel;

@Input() model: ExampleViewModel;

constructor() { }

ngOnInit() {
    this.copyOfModel = this.model; //this is undefined
}

这让我很困惑。如果我像这样更改基页：

<page-one *ngIf="!showPageTwo"
         (model)="model = $event"
         (next)="showPageTwo = true">
</page-one>

然后像这样更改第一页：

onSubmit() {
    this.exampleService.doSomething(this.otherModel).then(response => {
        this.modelEmitter.emit(response);
        this.onNextEmitter.emit();                
    });
}

然后@Input值未定义。这是我希望通过的模型。那么为什么我无法传递这样的属性，但我可以传递服务器响应？我不明白这一点。

感谢。

Answer 1

这一行没有做任何事情：(model)="model"。您必须将模型设置为某些内容（例如(model)="model = 1"）。

在您的情况下，您希望它是从this.modelEmitter.emit(response);行发出的值。在Angular中，您的发出值可通过$event变量在该输出的模板代码中访问。

总而言之，您需要像现在一样设置模板：(model)="model = $event"。

以下是围绕此主题的组件互动的Angular食谱：https://angular.io/guide/component-interaction#parent-listens-for-child-event

我在Angular中传递@Input的方式出了什么问题？

1 个答案: