Question

UITextFieldDelegate

app-sidebar呈现类别菜单，当选择类别时，我想将值传递给菜单部分组件以呈现适当的类别

那么如何在两个非父子组件

之间传递值

Answer 1

使用 @Output 事件发射器从app-sidebar组件中发出所选类别。

然后你可以在主机组件中为它编写一个事件hanlder。

在app-sidebar component.ts

@Output() categorySelect = new EventEmitter<any>(); //put the data type of category here.

//use this method to set the selected category
    public onSelectionChange(data): void {
       this.categorySelect.emit(data);
    }

在host.component.html文件中。

<div class="col-md-3 ">
  <app-sidebar (categorySelect)="onCategorySelect($event)"></app-sidebar>
  <app-menu-section [selectedCategory]="selectedCategory"></app-menu-section>
</div>

在host-component.ts文件

上

public onCategorySelect(data): void {
 this.selectedCategory = data;
}

在app-menu-section.ts文件中

@Input()  selectedCategory: any;

希望这会有所帮助。有关详情，请阅读this;

Answer 2

有很多方法可以做到这一点。我建议你在app-sidebar组件的控制器中定义一个get函数，比如'getSelectedItem'，它返回所选项的值。因此，现在您可以通过绑定随时恢复所选值，并且可以将值传递给其他组件。

因此，在app-sidebar组件中，您可以定义绑定

binding: {
   getSelectedValue: '='
}

在控制器中，您现在可以定义get-function

thsi.getSelectedValue = {
   // do your stuff here
   return selectedValue
}

现在关键的一段：在主控制器（我的意思是html页面的控制器，你在其中使用两个组件）你应该声明一个函数，只是告诉角度这个函数存在，但它没有在这里定义（事实上我们要调用函数，在组件中声明以恢复所选值）。所以在你的控制器中你只需要写

this.getValue;

现在，在html页面中，您可以通过以下方式使用修改后的组件：

<app-sidebar get-selected-value='mainController.getValue'></app-sidebar>

（记住kebab表示法：getSelectedItem为get-selectd-item）

这是一种反转绑定。通常，您通常在主控制器中定义一个函数，然后将其传递给组件。在这种情况下，函数在组件中定义，但是由于绑定现在可以在主控制器中调用函数getSelectedItem，调用this.getValue（）; 事实上，函数this.getValue（）没有在控制器中定义，只是声明它，但是它与函数getSelectedValue绑定。

此时您拥有自己的价值，可以将其传递给其他组件。

也许这种方法比其他方法稍长，但我建议使用它，因为在很多情况下使用这种“反向”绑定非常有用。

Answer 3

Atlernative您可以在服务中将参数共享为observable。只需将服务注入您的组件并订阅即可。在类别上选择更新observable，将通知所有订阅者。

export class CategoryService {
  emitter: EventEmitter;
  category$: Observable<Category>;

  constructor() { 
    this.$category = Observable.create(e => this.emitter = e);
  }

  getCategory$(): Observalbe<Category> {
    return this.$category;
  }

  selectCategory(category: Category): void {
    this.emitter.next(category)
  }   
}

Answer 4

您可以按照Anuradha Gunasekara的描述，通过在组件链中上下传递数据来做到这一点，只要您牢记您的应用程序可能变得繁琐且过于复杂。当然，这完全取决于上下文和要创建的内容。过去，我曾是Angular的初学者，但是犯了这个错误，发现事情发展以后，我陷入了混乱的困境。

如何在角度组件之间传递数据

4 个答案: