Question

test.component.html

<input type="text" name="fname" [(ngModel)]="user">
<button
class="btn btn-primary">Update Server</button>

test.component.ts

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

@Component({
  selector: 'app-testcomp',
  styleUrls: ['./testcomp.component.css']
})
export class TestcompComponent implements OnInit {

  constructor() { }
  @Input() user:any;
  ngOnInit() {

  }


}

在app.component.html

中

<app-testcomp [user]="ide"></app-testcomp>
<button
(click)="onserclicked()">Clicked</button>

在其ts文件中

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  ide:any;

  onserclicked()
  {
    alert(this.ide)
  }
}

单击app.component.html中的按钮...它显示的是未定义的，而不是在用户组件的文本框中输入的值

Answer 1

评论是对的，但你可以用其他东西来实现它。删除实际上不需要的输入，只留下

user:any;

将您的组件命名为

<app-testcomp #testcomp></app-testcomp>
<button (click)="onserclicked(testcomp.user)">Clicked</button>

然后一切都会奏效。

Answer 2

您需要使用装饰器 @Output ：

app.component.html：

<app-testcomp [user]="ide" (userClick)="onserclicked($event)"></app-testcomp>
<button
(click)="onserclicked()">Clicked</button>

<强> test.component.html

<input type="text" name="fname" [(ngModel)]="user">
<button
class="btn btn-primary" (click)="onChange()">Update Server</button>

<强> test.component.ts

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

@Component({
  selector: 'app-testcomp',
  styleUrls: ['./testcomp.component.css']
})
export class TestcompComponent implements OnInit {

  constructor() { }
  @Input() user:any;

  @Output()
  userClick: EventEmitter<any> = new EventEmitter<any>();

  public onChange(){
      this.change.emit();
  }

  ngOnInit() {

  }


}

你可以试试这个。我猜它正在发挥作用。

您可以this tutorial by Todd Motto了解所有组件事件

如何将属性从一个组件绑定到角度为4的App.Component？

2 个答案: