Question

我正在研究角度交互作用。我尝试导入所需的所有内容，并按照指示的步骤进行操作，但均不起作用。控制台中也没有出现任何错误。

父组件：APP组件

app.component.ts：

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

@Component({
   selector: 'app-root',
   template: `

          `,
   styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'arpitz';
    public name ="Arpit"
    public message = ""
}

app.component.html：

<h1>welcome {{message}}</h1>
<app-forms (childEvent)="message=$event" [parentData]="name"></app-forms>

儿童组件：表格组件

forms.component.ts：


import { Component, OnInit, Input, Output } from '@angular/core';
import {EventEmitter} from '@angular/core'
@Component({
      selector: 'app-forms',
      template:`
      <h2>{{"hello" + parentData}}</h2>
      <button onclick="fireEvent()">/<button>
      `,
      styleUrls: ['./forms.component.css']
})
export class FormsComponent implements OnInit {
    @Input() public parentData
    @Output() public childEvent = new EventEmitter()
    constructor() { }

    ngOnInit() { }
    fireEvent(){
      this.childEvent.emit('hi from child component')
    }
}

以防万一您对应用程序模块感到疑惑，也是如此： app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms'
import { AppComponent } from './app.component';
import { PractiseComponent } from './myComponents/practise/practise.component';
import { Practise2Component } from './myComponents/practise2/practise2.component';
import { FormsComponent } from './myComponents/forms/forms.component';

@NgModule({
  declarations: [
    AppComponent,
    PractiseComponent,
    Practise2Component,
    FormsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

尝试使用templateUrl代替template，或在应用程序组件的template中插入HTML：

@Component({
   selector: 'app-root',
   templateUrl: 'app.component.html', //may change depending on the dirs,
   styleUrls: ['./app.component.css']
})

或者：

@Component({
   selector: 'app-root',
   template: `
       <h1>welcome {{message}}</h1>
       <app-forms (childEvent)="message=$event" [parentData]="name"></app-forms>`
    ,
   styleUrls: ['./app.component.css']
})

Answer 2

代码中唯一的问题是 click 事件的绑定错误。
这是我的绑定点击事件（以角度表示）的代码。

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

Answer 3

除了上面提供的答案。

您出错了，因为HTML模板中没有任何内容。您选择了嵌入式模板，但未向其中添加内容。

页面：app.component.ts

这个

   import { Component } from '@angular/core';
   @Component({
   selector: 'app-root',
   template: ``, // NOTE HERE
   styleUrls: ['./app.component.css']
   })
   export class AppComponent {
    title = 'arpitz';
    public name ="Arpit"
    public message = ""
  }

应更改为此：

   import { Component } from '@angular/core';
   @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html', // NOTE HERE
   styleUrls: ['./app.component.css']
   })
   export class AppComponent {
    title = 'arpitz';
    public name ="Arpit"
    public message = ""
  }

这利用了外部模板Read More about Angular Component metadata Here。

您还可以选择使其成为嵌入式HTML

       import { Component } from '@angular/core';
       @Component({
       selector: 'app-root',
       template: `
          <h1>welcome {{message}}</h1>
           <app-forms (childEvent)="message=$event" [parentData]="name"></app-forms>
       `, // NOTE HERE
       styleUrls: ['./app.component.css']
       })
       export class AppComponent {
        title = 'arpitz';
        public name ="Arpit"
        public message = ""
      }

页面：forms.component.ts

使用（点击）代替 onclick Read more on Angular event binding here

import { Component, OnInit, Input, Output } from '@angular/core';
import {EventEmitter} from '@angular/core'
@Component({
      selector: 'app-forms',
      template:`
      <h2>{{"hello" + parentData}}</h2>
      <button (click)="fireEvent()">/<button>  // NOTE HERE
      `,
      styleUrls: ['./forms.component.css']
})
export class FormsComponent implements OnInit {
    @Input() public parentData
    @Output() public childEvent = new EventEmitter()
    constructor() { }

    ngOnInit() { }
    fireEvent(){
      this.childEvent.emit('hi from child component')
    }
}

您在Angular知识追求中万事如意

组件交互无法按角度进行

3 个答案: