时间戳

首页 > 解决方案 > 在另一个组件Angular 7中绑定ngModel上的值

html - 在另一个组件Angular 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: ['./main.component.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: ['./result.component.css']
})
export class ResultComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

问题是我如何在另一个组件（如结果组件）的第一个组件上绑定/使用“inputValue”上的值，有些人建议我使用事件发射器，但它对我不起作用，我是新手角度 7，所以我不知道语法是否错误或其他任何问题，所以我决定在这里显示整个组件，所以也许你们可以理解情况

标签： htmlnode.jsangulartypescriptangular7

解决方案

两个组件可以通过多种方式进行通信：

  • 服务
  • 一些商店（ngrx）
  • 输入/输出
  • 通过路由器传递状态（例如查询参数、参数、状态）
  • ...

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

在您的情况下，我建议在导航时传递状态。

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

然后您可以访问第二个组件中的状态：

export class ResultComponent implements OnInit {
    inputValue;

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

推荐阅读