Question

是Angular 2的新手，我正在使用数据绑定我不知道如何将值从一个页面打印到另一个页面。我正在尝试使用这段代码，但它会在同一页面中打印该值，如果有人知道逻辑帮助我，请提前致谢！

// child.component.ts

import {Component, EventEmitter, Input, Output} from '@angular/core';
import {Student} from './student';
import {Router} from '@angular/router';

@Component({
    selector: 'child-one',
    template: `
       <nav>
       <h3>{{childTitle}}</h3>

       <div>
          First Name:<input (input)="student.fname=$event.target.value" /> <br/>
          Last Name:<input (input)="student.lname=$event.target.value" />
          <button (click)="addStudent()">Add Student</button>
      </div >
    `,   
})

export class ChildOneComponent {

    constructor(private _router: Router){ }

    @Output('addStudentEvent') 
    addStdEvent = new EventEmitter<Student>();

    student = new Student();
    childTitle = '---Child One---';

    addStudent() {
       this.addStdEvent.emit(this.student);
       this._router.navigate(['name']);
    }       
}

// Parent.component.ts

import {Component,EventEmitter,Input} from '@angular/core';
import {Student} from './student';
import {Router} from '@angular/router';

@Component({
   selector: 'input-output',
   template: `
      <h1>{{parentTitle}}</h1>
      <p>Name: {{stdFullName}}</p>

      <child-one  (addStudenztEvent) = "saveData($event)"></child-one>                      
    `
    // providers: [Student]
    })

export class ParentComponent {
    parentTitle = 'Parent Component';
    stdAddMsg = 'Add Student';  

    //Property used in parent
    stdFullName = '';

    saveData(std) {
        this.stdFullName = std.fname + ' ' + std.lname ;
    }       
}

Answer 1

此问题与＆＃34;组件之间的通信＆＃34;

有关

你可以在这里找到答案：

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

如何使用Angular 2在一个页面中输入并在下一个Html页面中打印

1 个答案: