Question

我正在尝试将ngModel数据从一个组件传递到另一个组件，第二个组件可以使用该数据在其html中执行功能。

我正在使用@Input（），但我不知道如何通过超链接发送数据。

zip

home.component.ts

import { Component, OnInit, Input } from '@angular/core'; import { BasePageComponent } from 'src/app/partials/base-page/base-page.component'; import { ActivatedRoute } from '@angular/router'; import { SurveyService } from 'src/app/services/survey.service'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'] }) export class HomeComponent extends BasePageComponent implements OnInit { @Input() surveyName: string; surveys: any[]; constructor( route: ActivatedRoute, private surveyService: SurveyService) { super(route); } ngOnInit() { this.surveys = this.surveyService.getAll(); } }

home.component.html

<div class="col-4 col-sm-4 col-md-4 col-lg-4" *ngFor="let survey of surveys" > <a class="btn btn-outline-secondary" href="/about" role="button">Begin Survey</a> </div>

about.component.html

现在，这没有任何作用。我的预期结果是，当我单击开始调查时，<input type="text" [(ngModel)]="surveyName" oninput="loadSurvey(surveyName)">将加载我在{p>中使用about.component.html方法单击的调查

Answer 1

您可以使用共享组件。

在一个组件中，您可以侦听更改，在onChange上，您可以将信息传输到另一组件。

Storyboard

共享组件看起来像这样简单。

要发送邮件时，可以使用

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class DataService {

  private messageSource = new BehaviorSubject('default message');
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message);
  }

}

，在第二个组件中可以接收到它。

this.data.changeMessage('your info');

在两个组件中，您都可以导入服务，例如：私有数据：构造函数中的DataService。

有关更多信息，您可以观看和阅读this。

Answer 2

在您的服务文件中

import { BehaviorSubject } from 'rxjs';


surveyName : any;
private pathSource = new BehaviorSubject(window.location.pathname);
currentPath = this.pathSource.asObservable();

changeValue(message: string) {
    this.pathSource.next(message)
}

在您的about组件文件中

loadSurvey(surveyName){
    this.service.changeValue(surveyName);
}

在home.component.ts文件中

ngOnInit() {
    this.service.changeValue.subscribe(message => {
        console.log(message); // you will get your survey name sended from home component
    })
}

希望这对您有帮助

Angular如何将ngModel数据从一个组件传递到另一个组件？

2 个答案: