Question

有没有办法使用方法将数据{{error.value}}发送到另一个页面？

这是我的代码

＆＃13;

<ion-row *ngFor="let errors of adp_principal_menuRS">
          <ion-col class="info-col" col-4>
            <button ion-button color="primary" small (click)="goToErrors(errors.event)">
              {{errors.event}}
            </button>
          </ion-col>
</ion-row>

＆＃13;

goToErrors(menu: string){
    console.log(menu);
    this.navCtrl.push(AdpDetailPage, {

    });
  }

＆＃13;

我想将{{errors.event}}值发送到goToErrors()方法中的其他页面。

谢谢！

编辑：我实现了我想要的目标。我编辑了代码

Answer 1

可以通过服务在组件之间使用BehaviorSubject共享数据。这是一个例子：

// service.ts
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class ShareService {
    private errorSource = new BehaviorSubject<any>(null);
    error$ = this.errorSource.asObservable();

    setError(error: any){
        this.errorSource.next(error);
    }

使用error event方法在parent component中设置setError并订阅error中的error component。

  // error component.ts
  constructor(share: ShareService) {
        share.error$.subscribe(Err => this.error = Err);

Answer 2

使用事件发射器。

//Home component.ts import { Events } from 'ionic-angular'; constructor(public events: Events) {} directioChange(user) {this.events.publish('directiochanged', 'true');} //App.component.ts constructor(public events: Events) { events.subscribe('directiochanged', (direction) => { this.isRtl = direction;console.log(direction);});}

Answer 3

我生成了一个可以与你想要做的匹配的Plunker。

https://plnkr.co/edit/MNqpIqJjp5FN30bJd0RB?p=preview

<强>服务

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <button (click)="goToErrors()">{{errors.event}} </button>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class App {
  name:string;
  errors = { event: 'Test Error', otherInfo: 'Test Info' };

  constructor(private errorService: ErrorService, private router: Router) {
    this.name = `Angular! v${VERSION.full}`
  }

  goToErrors(): void {
    // Code to navigate to the other component
    this.errorService.errorInfo = this.errors.event;
    this.router.navigate(['/a']);
  }
}

<强>组件

acct = AccountFactory()

Answer 4

为什么不使用navParam发送值？

Swift 3.1

在您的goToErrors(menu: string){ console.log(menu); this.navCtrl.push(AdpDetailPage, { errorEvent: menu // <------------------------- Add this line }); }：

中

AdpDetailPage

使用Service - IONIC 2，Angular 2在组件之间共享数据

4 个答案: