Angular中@Input传值方式存在什么问题？Angular 5组件间模型传递咨询

首先得指出你当前代码里最核心的问题：把输入属性（@Input）和输出事件（@Output）的绑定语法搞混了，这直接导致model传递逻辑出错。

具体问题拆解 #

看你父组件里page-one的写法：

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

这里的(model)="model"是事件绑定语法（对应子组件的@Output），但你实际需求是把父组件的model传递给page-one作为输入，应该用方括号[model]="model"才对。

另外还有个潜在问题：如果page-one里修改了model的内容，你当前的写法没法把更新后的值同步回父组件，导致切换到page-two时，拿到的还是旧的model值。

分场景修复方案 #

场景1：Model是引用类型（比如对象/数组） #

如果你的model是对象这类引用类型，子组件修改对象内部属性时，父组件的model会自动同步（因为引用指向同一个内存地址），只需要修正输入绑定语法即可：

1. 修正父组件HTML的page-one绑定

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

2. 在PageOneComponent里定义@Input接收model

import { Component, Input } from '@angular/core';
// 导入你的Model类型
import { YourModel } from './path-to-your-model';

@Component({
  selector: 'page-one',
  templateUrl: './pageOneComponent.html'
})
export class PageOneComponent {
  // 定义@Input接收父组件传递的model
  @Input() model: YourModel;

  // 假设你有触发next的方法
  goToNextPage() {
    // 这里直接修改model的属性，父组件会自动同步
    this.model.someProperty = '更新后的值';
    // 触发父组件的next事件
    this.next.emit();
  }
}

场景2：Model是基本类型（字符串/数字）或需要重新赋值对象 #

如果model是基本类型，或者你在page-one里需要重新给model赋值（比如this.model = new YourModel()），就需要配合@Output实现双向绑定，确保父组件能拿到更新后的值：

1. 在PageOneComponent里添加@Output

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { YourModel } from './path-to-your-model';

@Component({
  selector: 'page-one',
  templateUrl: './pageOneComponent.html'
})
export class PageOneComponent {
  @Input() model: YourModel;
  // 定义用于同步model更新的输出事件
  @Output() modelChange = new EventEmitter<YourModel>();
  @Output() next = new EventEmitter<void>();

  updateAndGoNext() {
    // 重新赋值model对象
    this.model = { ...this.model, updatedProp: '新值' };
    // 通知父组件更新model
    this.modelChange.emit(this.model);
    // 切换到page-two
    this.next.emit();
  }
}

2. 父组件使用双向绑定语法

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

这种[(model)]的写法是Angular的双向绑定语法糖，等价于[model]="model" (modelChange)="model = $event"。

关键总结 #

你当前的核心错误是误用了绑定语法：用事件绑定的圆括号()来处理输入属性，正确的输入绑定应该用方括号[]。另外要根据model的类型，选择是否需要配合@Output实现值的双向同步，这样page-two才能拿到最新的model数据。

内容的提问来源于stack exchange，提问作者Ralph