Angular, как передать данные ngModel из одного компонента в другой?

Question

Я пытаюсь передать данные ngModel из одного компонента в другой, где второй компонент может использовать эти данные для выполнения функции в своем HTML.

Я использую @Input (), но я нене знаю, как отправить эти данные по гиперссылке.

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)">

Прямо сейчас, это ничего не делает.Мой ожидаемый результат заключается в том, что когда я нажимаю Начать опрос , about.component.html загрузит опрос, на который я нажал, с помощью метода loadSurvey(surveyName) в

Answer 1

В вашем сервисном файле

import { BehaviorSubject } from 'rxjs';


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

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

В вашем файле компонентов

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
    })
}

Надеюсь, это поможет вам

Answer 2

Вы можете использовать общий компонент.

В одном компоненте вы можете прослушивать изменения, а onChange вы можете передавать информацию в другой компонент.

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');

и во втором компоненте, где вы его получите.

this.data.currentMessage.subscribe(message => {
    console.log(message); //or whatever you want
}});

В обоих компонентах вы можете импортировать ваш сервис, например: личные данные: DataService в конструкторе.

для получения дополнительной информации вы можете посмотреть и прочитать это .