代码之家 › 专栏 › 技术社区 › Able Alias

从另一个组件调用组件函数获取“无法读取属性”错误

components typescript angular javascript

Able Alias · 技术社区 · 6 年前

我试图通过将一个组件的引用传递给另一个组件来调用另一个组件函数,但得到了“无法读取属性”错误。这是密码

报警组件

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

@Component({
  selector: 'app-alert',
  templateUrl: './alert.component.html',
  styleUrls: ['./alert.component.css']      
})

export class AlertComponent implements OnInit {  
  AlertMessage:string;

  constructor() {        
   }

  showSuccessAlert(){       
      this.AlertMessage =  "Data saved successfully.";
  }

  ngOnInit() {
  }

}

警报组件HTML

<p>{{AlertMessage}}</p>

我打电话来 showSuccessAlert 来自其他组件的函数

成分

import { Component, OnInit, Input, HostListener } from '@angular/core';
import { QueueService } from 'src/services/queue.service';
import { ActivatedRoute } from "@angular/router";
import { NgForm } from '@angular/forms';
import { Queue } from 'src/models/queue';
import { error } from 'util';
import { AlertComponent } from '../alert/alert.component';

@Component({
  selector: 'queue-edit',
  templateUrl: './queue.edit.component.html'  
})
export class QueueEditComponent implements OnInit{
    @Input() alert:AlertComponent;

    queue = new Queue();    
    constructor(private api: QueueService, private route: ActivatedRoute){
        this.route.params.subscribe(params => this.params = params);

    } 
    title = "Edit Support Queue";

    ngOnInit() { 
    }

    @HostListener('saveQueue')
    saveQueue(queue){
        this.alert.showSuccessAlert(); 
    }
}

HTML

<app-alert></app-alert>

误差

ERROR TypeError: Cannot read property 'showSuccessAlert' of undefined
    at QueueEditComponent.push../src/app/queue/queue.edit.component.ts.QueueEditComponent.saveQueue (queue.edit.component.ts:44)
    at Object.eval [as handleEvent] (QueueEditComponent.html:25)
    at handleEvent (core.js:19545)
    at callWithDebugContext (core.js:20639)
    at Object.debugHandleEvent [as handleEvent] (core.js:20342)
    at dispatchEvent (core.js:16994)
    at core.js:17441
    at HTMLButtonElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:14051)

1 回复 | 直到 6 年前

SiddAjmera 6 年前

你应该用 @ViewChild 而不是 @Input . 像这样:

import { ..., ViewChild } from '@angular/core';
...
import { AlertComponent } from '../alert/alert.component';

@Component({...})
export class QueueEditComponent implements OnInit{
    @ViewChild(AlertComponent) alert:AlertComponent;

    ...

    @HostListener('saveQueue')
    saveQueue(queue){
        this.alert.showSuccessAlert(); 
    }
}

PS: 您将无法访问 AlertComponent 在 QueueEditComponent 直到 ngAfterViewInit 被称为。所以确保你的 saveQueue 以后有时间打电话来 后进 .