angular - вызвать функцию из другого машинописного файла

Question

Я сталкиваюсь с проблемой при вызове функции / метода из другого файла машинописи. Я прочитал много статей и обнаружил, что с помощью сервиса это легко сделать, поэтому здесь я со своим кодом, но он не работает. Это не выдает никакой ошибки, но и не дает никаких результатов.

trigger.html

<button (click) = "openToast();" type="button" class="btn btn-primary btn-block">
  Open Toast
</button>

trigger.ts

import { Component, OnInit } from '@angular/core';
import { MessageService } from '../message.service';

@Component({
  selector: 'app-trigger',
  templateUrl: './trigger.component.html',
  styleUrls: ['./trigger.component.scss'],
  providers: [MessageService]
})
export class TriggerComponent implements OnInit {

  constructor(private _messageService: MessageService) { }

  ngOnInit() {
  }

  openToast(){
    this._messageService.callToastr();
  }

}

message.service

import { Injectable } from '@angular/core';
import { Subject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  invokeEvent = new Subject<any>();

  listen(): Observable<any> {
    return this.invokeEvent.asObservable();
  }

  callToastr(){
    this.invokeEvent.next('Y');
  }
  constructor() { }
}

home.ts

import { MessageService } from '../message.service';

const types = ['success', 'error', 'info', 'warning'];

@Component({
  templateUrl: './home.component.html',
  providers: [MessageService]
})
export class HomeComponent {

constructor(public toastr: ToastrService, private renderer: Renderer2, public _dataService: DataService,
              public _messageService: MessageService) {
    this.options = this.toastr.toastrConfig;
    this._messageService.listen()
    .subscribe( value => {
      if (value === 'Y') {
        this.openToast();
      }
    })
  }

 openToast() {
    const { message, title } = this.getMessage();
    // Clone current config so it doesn't change when ngModel updates
    const opt = cloneDeep(this.options);
    const inserted = this.toastr.show(
      message,
      title,
      opt,
      this.options.iconClasses[this.type],
    );
    if (inserted) {
      this.lastInserted.push(inserted.toastId);
    }
    return inserted;
  }
}

Я пробовал это многими способами, но каждый раз терпел неудачу. Может кто-нибудь, пожалуйста, помогите в поиске первопричины? Заранее спасибо!

Answer 1

Насколько я вижу, твой метод корректен. Я скучаю по ViewContainerRef, Вы должны установить его хотя бы один раз, чтобы сказать Toastr, где появиться. Пожалуйста, расширьте свой код в home.ts следующим образом:

import { ViewContainerRef } from '@angular/core';

constructor(
    public toastr: ToastrService,
    public toastrMgr: ToastrManager, 
    private renderer: Renderer2,
    public _dataService: DataService,
    public _messageService: MessageService,
    private viewContainerRef: ViewContainerRef
) {
    this.toastrMgr.setRootViewContainerRef(viewContainerRef);

    // the rest of your code in constructor
}

Обратите внимание, что было бы намного проще, если бы вы поместили ViewContainerRef в ваш иерархически самый высокий компонент. Обычно это app.component.ts. В противном случае вы должны внедрить этот код видеомагнитофона в каждый отдельный компонент, который должен показывать сообщения тостера.

Но для начала просто попробуйте, если это решение заставит появиться тостер в home.ts.