我正在开发一个角色应用程序供管理人员跟踪他们的团队,我遇到了@Output错误:

An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'.

我有一个Meetings组件,生成一个MeetingItem组件列表.我想在用户点击不同按钮(编辑,删除,显示详细信息)时执行操作.

这是我的父会议模板:

<div class="meeting__list" [@newMeeting]="meetings.length">
  <app-meeting-item
    *ngFor="let meeting of meetings"
    [meeting]="meeting"
    (deleteMeeting)="deleteMeeting($event)"
    (openMeetingDialog)="openMeetingDialog($event)"
    (messageClick)="openMessage($event)"
  ></app-meeting-item>
</div>

我的MeetingItem模板(仅此帖子涉及的部分):

<span class="meeting__actions">
    <mat-icon *ngIf="meeting.message" (click)="onMessageClick(meeting)" matTooltip="Read the message"
      matTooltipPosition="above" class="icon--notes">notes</mat-icon>
    <mat-icon (click)="onOpenMeetingDialog(meeting)" matTooltip="Edit this meeting" matTooltipPosition="above" class="icon--edit">edit</mat-icon>
    <mat-icon (click)="onDeleteMeeting(meeting.id)" matTooltip="Delete this meeting" matTooltipPosition="above" class="icon--delete">delete_outline</mat-icon>
  </span>

我的MeetingItem组件:

import { Component, Input, Output } from '@angular/core';
import { EventEmitter } from 'events';

@Component({
  selector: 'app-meeting-item',
  templateUrl: './meeting-item.component.html',
  styleUrls: ['./meeting-item.component.scss']
})
export class MeetingItemComponent {

  @Input() …

在下面的代码中，我想使用 来EventEmitter调用该方法onlyNewAddedItems。

我定义了EventEmitter实例和发出事件的方法，如下所示：

@Output() newItemValue = new EventEmitter<string>();

  addNewItem(val : string) {
    this.newItemValue.emit(val);
    console.log("add new item:" + val);
    this.items.push(val);
  }

为了绑定到第三个事件，我执行了以下操作：

<h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>

但是当我编译代码时，我收到以下错误

Error: src/app/app.component.html:4:42 - error TS2345: Argument of type 'Event' is not assignable to parameter of type 'string'.

4 <h1 (newItemValue) = onlyNewlyAddedItems($event)></h1>                                        
  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
    

请让我知道如何onlyNewlyAddedItems通过执行该方法EventEmitter。

AppComponent.component.ts：

import { Component, Input, Output, EventEmitter …

这真的很奇怪，也很难解释。我EventEmitter在我的一些服务中使用过，我一直在使用它来更改我的视图中的数据。我遇到了更改路线（通过链接或通过历史记录）的问题，它似乎多次触发，因此它弄乱了我的逻辑。

所以我在 stackblitz 上创建了一个测试，看看我是否可以重新创建它。我做了一个简单的服务：

import { Injectable, Output, EventEmitter } from '@angular/core';

@Injectable()
export class ListService {
@Output() listChanged: EventEmitter<any[]> = new EventEmitter<any[]>()

  constructor() { }

  list() {
    this.listChanged.emit([]);
  }
}

然后在我的一条路线中，我只是这样做：

import { Component, OnInit } from '@angular/core';

import { ListService } from '../list.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  count: any[] = []

  constructor(
    private listService: ListService
  ) { }

  ngOnInit() {
    this.listService.listChanged.subscribe(() => {
      this.count.push('invoked');
      console.log('invoked');
      console.log('------'); …

我有一个滑块，其中是动态创建的项目 - 这些是子组件。

滑块的 ng-container 父模板：

<div id="slider-wrapper">
    <ng-container appSliderForm *ngFor="let question of questionsInSlider"
                          [questionTest]="question" (onRemove)="removeQuestion($event)">
    </ng-container>
</div>

这些子组件由 appSliderForm 指令创建：

@Directive({
  selector: '[appSliderForm]'
})
export class FormSliderDirective implements OnInit {

  @Input()
  questionTest: QuestionInSlider;

  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  ngOnInit(): void {
    const factory = this.resolver.resolveComponentFactory<TestQuestionInSliderComponent>(TestQuestionInSliderComponent);
    const component = this.container.createComponent(factory);
    component.instance.questionTest = this.questionTest;
    component.instance.ref = component;
  }

}

在我的子组件中，我有一个删除功能，用于将自身从滑块中删除。

@Component({
  selector: 'app-test-question-in-slider',
  templateUrl: './test-question-in-slider.component.html',
  styleUrls: ['./test-question-in-slider.component.less']
})
export class TestQuestionInSliderComponent {

  questionTest: QuestionInSlider;

  ref: any;

  @Output() …

我在ngIf中有一些div，我只是想知道某种特定的div是否是现在可见/活动的div，例如事件触发器（如focus（不起作用））之类的东西，以及这个事件，我将设置一个变量或其他东西。

<div *ngIf="test === true" (focus)="myVariable = true">
</div>

DropdownComponent我正在尝试从to发出值TaskComponent：

DropdownComponent位于NavBbrComponent( )内部AppModule并且TaskComponent属于。MainComponentHomeModule

里面DropdownComponent有select定义：

<select class="form-control minimal" id="project" name="project" [(ngModel)]="selectedProject" (change)="onChange($event.target.value)">
  <option>Project 1</option>
  <option>Project 2</option>
</select>

使用onChange发出值的方法：

onChange(event) {
    this.toTask.emit(event);
  }

值绑定在主组件中，其中是任务组件的定义

onChange(event) {
    this.toTask.emit(event);
  }

但没有任何价值TaskComponent。

斯塔克闪电战

我在表中有一些数据绑定，单击任何特定的我想将当前单击的对象显示更多相关数据到另一个组件（子组件）

例如我从此链接获取的数据： http: //jsonplaceholder.typicode.com/users

HTML 代码：

<table>
  <thead>
    <th>
      Id
    </th>
    <th>
      name
    </th>
    <th>
      username
    </th>
    <th>
      email
    </th>
    <th>
      street
    </th>
    <th>
      suite
    </th>
    <th>
      zipcode
    </th>
    <th>
      phone
    </th>
    <th>
      website
    </th>
    </thead>
  <tbody>
    <tr *ngFor="let data of httpdata"> 
      <td>{{data.id}}
      </td> 
      <td>{{data.name}}
      </td> 
      <td>{{data.username}}
      </td> 
      <td>{{data.email}}
      </td> 
      <td>{{data.address.street}}
      </td> 
      <td>{{data.address.city}}
      </td> 
      <td>{{data.address.suite}}
      </td> 
      <td>{{data.address.zipcode}}
      </td> 
      <td>{{data.phone}}
      </td> 
      <td>{{data.website}}
      </td> 
      <td>
        <a routerLink="/conflict-details/conflict" (click)="onSelect(data)">Go to 
        </a> 
      </td> 
    </tr>
  </tbody>
</table>

如果您看到表中有一个“转到”按钮，当我单击任何特定数据时，它应该向我显示有关当前单击的完整信息，但在我的情况下，当我单击“转到”以获取特定数据时，我想将数据绑定到另一个组件中所有 td 数据都应显示在新组件（子组件）中。

简单我想跟踪子组件中选定数据的单击事件。并且该表在父组件中呈现。

附件是我的数据表。

我是 Angular 的新手，我已经阅读了事件绑定，所以我可以做这样的事情：

<button (click)="doSomething()"></button>

我想知道是否可以创建自定义事件并执行相同的操作。假设我想要一个自定义事件，例如：deleteItem，是否可以执行此类操作？如何？

<my-component (deleteItem)="doSomething()"></my-component>

在本文的帮助下，我使用包含@Input和 的angular 元素创建了一个小型 Web 组件@Output。

我能够将数据传递给@Input属性，但监听@Output事件让我发疯，因为我无法弄清楚如何从回调事件参数中读取数据。

//Emitting the boolean data
likeEvent() { 
    this.likeNotify.emit(true);
}

在纯 javascript 中，我正在听像这样的 likeNotify 事件：

const el = document.querySelector('facebook-card');
      el.addEventListener('likeNotify', e => {
        console.log(e.currentTarget.data); // Not working
      });

那么如何从从发射器传递的 e 对象中检索真/假值？

我正在学习 angular，但遇到了一个问题：我在主组件中有一个组件，我想发出一个事件，但出现错误。这是我的代码：

import { Component,  OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-game-control',
  templateUrl: './game-control.component.html',
  styleUrls: ['./game-control.component.css']
})
export class GameControlComponent implements OnInit {
  @Output() numberGenerated: EventEmitter<{v: number}> = new EventEmitter<{v: number}>();
  game: any;

  constructor() { }

  ngOnInit() {
  }

  startGame() {
    this.game = setInterval(this.generateEvent, 1000);
  }

  stopGame() {
    clearInterval(this.game);
  }

  generateEvent(): void {
    const n = Math.floor((Math.random() * 10) + 1);
    this.numberGenerated.emit({v: 3});
    console.log('event sent');
  }
}

这是该组件的 html 代码：

这是 app-rootcomponent html：

<div>
    <app-game-control (numberGenerated)="numberGeneratedEvent($event)">
    </app-game-control> …

使用 Angular6，假设我有 2 个子组件 A、B，它们都是父组件 P 的一部分。我想在组件 A 上使用表单输入-因此一旦单击，字符串值将传递并触发组件 B 上的函数. 可能是这样的：

functionOnB(valueFromA: string) { //some code here; } 

这甚至可能吗？

我已经使用 angular 的 EventEmitter 在组件之间成功传输了数据，但是是否可以使用这些数据调用函数，而不仅仅是传递原始信息？

考虑带有输入的 Angular 反应形式。每当输入发生变化时，我们都希望保留其旧值并将其显示在某个地方。下面的代码按照显示的方式执行此操作：

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  name = 'Reactive Form';
  changedValue;
  oldValue;
  ooldValue;
  rform = new FormGroup({
    inputOne: new FormControl('chang me')
  });


  onOneChange(event) {
    this.changedValue = event.target.value;
    console.log('oneChanged', this.changedValue, 'old value is', this.oldValue);
    this.ooldValue = this.oldValue;
    setTimeout( ()=>this.oldValue = this.changedValue, 1);
  }
}

<form [formGroup]="rform">
    <label>
      One:
      <input formControlName="inputOne" (change)="onOneChange($event)"/>
    </label>
  </form>
  <p>
    changed value: {{changedValue}}
  </p>
  <p>
        old value: {{ooldValue}}
  </p>

正如您所看到的，它已通过在代码中保留三个变量来解决，这是不可取的（是的，changedValue可以删除该变量，但仍然有两个变量保留旧值很烦人，不是吗？）。

有没有办法用更少的变量重写代码？Angular 本身有下降的方式来做到这一点吗？

您可以在这里找到代码

我正在尝试结合动态组件（在运行时创建）和 EventEmitter 概念来访问 Angular 8 中父组件中子组件的数据。

我的计划是创建一个功能，用户可以在其中动态添加元素（例如仪表板上的卡片）并删除它们。在这种情况下，创建的卡片有一个“删除”按钮。这个删除按钮应该将信息传播到父组件，子组件可以从包含动态创建的组件的数组中删除。

我在本教程中从 angular 文档中了解到，我需要创建一个指令。现在我有了断言（我认为），该指令位于父组件和子组件之间，我不知道如何正确发出事件以从提到的数组中删除子组件。

指令

@Directive({
  selector: '[appCards]'
})
export class CardDirective {

  constructor(public viewContainerRef: ViewContainerRef) {
  }

  @Output() directiveDelete = new EventEmitter<any>();
}

父组件

card-banner.component.ts

@Component({
  selector: 'app-card-banner',
  templateUrl: './card-banner.component.html',
  styleUrls: ['./card-banner.component.scss']
})
export class CardBannerComponent implements OnInit, OnDestroy  {

  constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

  @Input() cards: CardItem[];

  @ViewChild(CardDirective) appCards: CardDirective;

  loadCards() {
    const viewContainerRef = this.appCards.viewContainerRef;
    viewContainerRef.clear();
    for (const card of this.cards) {
      const componentFactory =
        this.componentFactoryResolver.resolveComponentFactory(card.component);
      const componentRef = …