从另一个组件Angular 7获取价值 [英] Get value from another component Angular 7

问题描述

我必须将组件navbar和form-diyalog分开.我想在导航栏中使用form-diyalog中的值.

I have to separate component navbar and form-diyalog. I want to use an value from form-diyalog in navbar.

这是我的navbar.ts

This is my navbar.ts

import { Component, OnInit } from "@angular/core";
import { MenuItemModels } from "./models/MenuItemModel";

@Component({
  selector: "app-navbar",
  templateUrl: "./navbar.component.html",
  styleUrls: ["./navbar.component.css"]
})
export class NavbarComponent implements OnInit {
  MenuItem: MenuItemModels[] = [
    { name: "Anasayfam", link: "#" },
    { name: "Hakkımızda", link: "#" },
    { name: "Üniversitemiz", link: "#" },
    { name: "Fakültelerimiz", link: "#" },
    { name: "Bize Ulaşın", link: "#" }
  ];
  addItem() {
    let customObj = new MenuItemModels();
    customObj.name = customObj.link = "#";
    this.MenuItem.push(customObj);
  }

  deleteItem(i) {
    this.MenuItem.splice(i, 1);
  }

  constructor() {}

  ngOnInit() {}
}

这是我的表格-diyalog.ts

This is my form-diyalog.ts

import { Component, OnInit, Input, Output } from "@angular/core";
import { FormControl } from "@angular/forms";

@Component({
  selector: "app-form-diyalog",
  templateUrl: "./form-diyalog.component.html",
  styleUrls: ["./form-diyalog.component.css"]
})
export class FormDiyalogComponent implements OnInit {
  name = new FormControl("");

  constructor() {}

  ngOnInit() {}
}

这是form-diyalog.html

and this is form-diyalog.html

    <label>
    Menu Name:
    <input type="text" [formControl]="name">
    </label>

    <p>
    Value: {{ name.value }}
    </p>

我可以在form-diyalog组件中写入name.value，但不能在navbar组件中写入它.我怎样才能做到这一点?我尝试了@output，@input但我做不到.

I can write name.value in form-diyalog component but i cant it in navbar component. How i can achieve this? I tried @output, @input but i could't.

推荐答案

您可以使用Rxjs subject进行相同的操作，这里是如何创建动态主题的示例.因此，每次无需创建新主题即可传递来自其他组件的数据

You can use Rxjs subject for the same here is the example of how you can create a dynamic subject. so every time you don't need to create a new subject to pass the data from another component

BrodcastService.ts

interface Event {
  key: string;
  value: any;
}


@Injectable({
  providedIn: 'root'
})

export class Broadcaster {

  // subject 
  protected _eventsSubject = new Subject<Event>();
  constructor() {
  }

   broadcast(key: any, value: any) {
    this._eventsSubject.next({ key, value }); // here we are setting the key and value of our subject
   }

  on<T>(key: any): Observable<T> {
    return this._eventsSubject.asObservable()
            .pipe(
                filter(e => e.key === key),
                map(e => e.value)
            );
  }
}

您要

ComponentOne.ts 组件将数据发送到另一个组件

ComponentOne.ts component you want to send the data to another component

import { Broadcaster } from '../BrodcastService.service';
export class ComponentOne implements OnInit {
constructor(private broadcaster: Broadcaster) { }

someFunction() {
         this.broadcaster.broadcast('errorMessage', 'some error');
//         this.broadcaster.broadcast('errorMessage', {err: 'some error'});
// you can also pass the object
}

componentTwo.ts //这是消耗主题的组件

componentTwo.ts // this is a component which consume the subject

import { Broadcaster } from '../BrodcastService.service';
export class componentTwo implements OnInit {
constructor(private broadcaster: Broadcaster) { }

someFunction() {
this.broadcaster.on('errorMessage').subscribe(response => { 
 console.log(response); // here you are getting the data from the other component 
});
}

这篇关于从另一个组件Angular 7获取价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！