javascript - 与其他组件共享组件数据

Question

我已关注this tutorial这非常有帮助，但似乎我仍然得到它，但我不明白我错过了什么!

当鼠标移到子组件(汉堡组件)中的列表上时，我希望文本动态显示在父组件(标题组件)上。

当我悬停时，它获取文本，它发出文本，但我无法将其发送到父容器!

下面是我的代码:

• 来自 Burger-Component 的列表

  <li><a routerLink="/about" (mouseover)="getText($event)">about</a></li>
        <li><a routerLink="/what-to-expect"(mouseover)="getText($event)">what to expect</a></li>
        <li><a routerLink="/gallery"(mouseover)="getText($event)">gallery</a></li>
        <li><a routerLink="/activities"(mouseover)="getText($event)">activities</a></li>
        <li><a routerLink="/contact"(mouseover)="getText($event)">contact</a></li>

-ts 来自 Burger 组件

  ngOnInit() {
  	this.active = this.init || false;
  } 

  onBurgerClicked() {
    this.active = !this.active;
    this.opened.emit();
  }

  getText(event) {
    this.title = event.target.innerText;
    this.sendTitle.emit(this.title)
    console.log("title sent", this.title);
  }

-ts header 组件

  pageTitle: string;

  constructor() { }

  ngOnInit() {
  }

  getTitle($event) {
    console.log("title recieved");
  	this.pageTitle = $event;
  }

<app-header-component (sendTitle)="getTitle($event)"></app-header-component>

• 项目中我的文件层次结构的图像

Answer 1

您绝对可以通过这个简短的 YouTube 视频中展示的一些方法来实现此目的:https://youtu.be/I317BhehZKM

您还应该真正考虑在此处使用字符串插值:

汉堡 html

<li><a routerLink="/about" (mouseover)="getText(about)">{{about}}</a></li>
<li><a routerLink="/what-to-expect"(mouseover)="getText(whatToExpect)">{{whatToExpect}}</a></li>
<li><a routerLink="/gallery"(mouseover)="getText(gallery)">{{gallery}}</a></li>
<li><a routerLink="/activities"(mouseover)="getText(activities)">{{activities}}</a></li>
<li><a routerLink="/contact"(mouseover)="getText(contact)">{{contact}}</a></li>

汉堡ts

//Add Output and Event Emitter to your imports
import { Component, OnInit, Output, EventEmitter  } from '@angular/core';

export class BurgerComponent implements OnInit {
  //Add these variables for your string interpolation and also make sure you have the output decorator and variable
  about: string = "About";
  whatToExpect: string = "What to Expect";
  gallery: string = "Gallery";
  activities: string = "Activities";
  contact: string = "Contact";
  @Output() burgerText = new EventEmitter<string>()


  ngOnInit() {
    this.active = this.init || false;
  } 

  onBurgerClicked() {
    this.active = !this.active;
    //this.opened.emit();
  }

  getText(text: string) {
    this.burgerText.emit(text);
    console.log("title sent", text);
  }

}

标题 html

<h5>{{pageTitle}}</h5>
<app-burger (burgerText)="getTitle($event)"></app-burger>

标题ts

  pageTitle: string;

  constructor() { }

  ngOnInit() {
  }

  getTitle($event) {
    console.log("title recieved: ", $event);
    this.pageTitle = $event;
  }