在角7另一组件绑定上ngModel的值

让说，我有这个组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-main',
  template: `<div class="border">
  <h1>Simple Date Converter</h1>
  <br>
  <br>
  <p>Input RFC-3339 Formatted Date:</p>

    <div id="in" class="block">
      <input #myInput [(ngModel)]="inputValue">
        <br> <br>
        <button class="btn" [routerLink]="['result']">Convert Date</button>

        <p>{{ inputValue | date:'EEEE, d MMMM, y' }}</p>
    </div>
  <br>
  <br>
</div>  `,
  styleUrls: ['./mainponent.css']
})
export class MainComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

然后当我点击该按钮它应该路由这样的另一个组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-result',
  template: `<div class="results">
  <h1>Simple Date Converter</h1>
  <br> <br>
  <p>Converted result</p>
  <br><br>
  <p>{{ inputValue | date:'EEEE, d MMMM, y' }}</p>
  <br>
  <a routerLink="">back to main page</a>
  </div>`,
  styleUrls: ['./resultponent.css']
})
export class ResultComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

问题是我怎么能绑定/像的结果成分与其它成分的第一个组件上使用值的“inputValue将”，有人建议我使用事件发射器，但它在某种程度上不适合我的工作，我对新角7，所以我不知道如果语法错误或其他任何在这个问题，所以我决定在这里显示整个组件，这样也许你们可以了解情况

有多种方式两个组件如何通信：

• 服务
• 一些商店（NGRX）
• 输入/输出
• 通过状态通过路由器（例如，查询参数，则params，状态）
• ...

在你的情况下，他们没有父/子关系，所以你不能使用输入/输出，因为它们是路由组件，但你可以用一切。

在你的情况我建议导航时传递的状态。

<button class="btn" [routerLink]="['result']" [state]="{inputValue: inputValue}">Convert Date</button>

然后你就可以在第二部分访问的状态：

export class ResultComponent implements OnInit {
    inputValue;

    ngOnInit(): void {
        this.inputValue = history.state.inputValue;
    }
}

在角7另一组件绑定上ngModel的值

让说，我有这个组件：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-main',
  template: `<div class="border">
  <h1>Simple Date Converter</h1>
  <br>
  <br>
  <p>Input RFC-3339 Formatted Date:</p>

    <div id="in" class="block">
      <input #myInput [(ngModel)]="inputValue">
        <br> <br>
        <button class="btn" [routerLink]="['result']">Convert Date</button>

        <p>{{ inputValue | date:'EEEE, d MMMM, y' }}</p>
    </div>
  <br>
  <br>
</div>  `,
  styleUrls: ['./mainponent.css']
})
export class MainComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

然后当我点击该按钮它应该路由这样的另一个组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-result',
  template: `<div class="results">
  <h1>Simple Date Converter</h1>
  <br> <br>
  <p>Converted result</p>
  <br><br>
  <p>{{ inputValue | date:'EEEE, d MMMM, y' }}</p>
  <br>
  <a routerLink="">back to main page</a>
  </div>`,
  styleUrls: ['./resultponent.css']
})
export class ResultComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

问题是我怎么能绑定/像的结果成分与其它成分的第一个组件上使用值的“inputValue将”，有人建议我使用事件发射器，但它在某种程度上不适合我的工作，我对新角7，所以我不知道如果语法错误或其他任何在这个问题，所以我决定在这里显示整个组件，这样也许你们可以了解情况

有多种方式两个组件如何通信：

• 服务
• 一些商店（NGRX）
• 输入/输出
• 通过状态通过路由器（例如，查询参数，则params，状态）
• ...

在你的情况下，他们没有父/子关系，所以你不能使用输入/输出，因为它们是路由组件，但你可以用一切。

在你的情况我建议导航时传递的状态。

<button class="btn" [routerLink]="['result']" [state]="{inputValue: inputValue}">Convert Date</button>

然后你就可以在第二部分访问的状态：

export class ResultComponent implements OnInit {
    inputValue;

    ngOnInit(): void {
        this.inputValue = history.state.inputValue;
    }
}