Angular：如何使我的组件修改其父级属性之一的值

Question

我和Kendo一起为Angular工作了一段时间，并且有一些东西引起了我的兴趣。有很多Kendo组件都有一个名为value的属性。此属性连接到我的组件（父组件）的属性，如下所示：

<kendo-numerictextbox [value]="quantity">
</kendo-numerictextbox>

在这里，quantity是我的组件的属性。有趣的是，每次用户点击数字文本框时，Kendo组件都会更新我的组件的属性。我试图用我的组件复制相同的行为，具体地说，我正在尝试使用@HostBinding，但我没有使用指令，而是使用它与组件：

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @HostBinding('title') title;

  constructor() { }    
}

我尝试的另一件事是将父母注入孩子：

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  constructor(@Host() public parent: AppComponent) { }
}

在这种情况下，是的，我可以访问父属性，但这意味着子组件必须知道其父类型。

这是给stackblitz的link。

老实说，我不知道该怎么做。任何的想法？

编辑：请注意，我所问的是我如何能够复制Kendo组件对其value属性的相同行为。我不是要求使用共享服务的解决方法。

Answer 1

你可以使用BehaviorSubject来实现它（或eventEmitter aswell）。我用了第一个。

添加服务：

@Injectable()
export class AppService{
    private $change = new BehaviorSubject<string>(null);
    closeEvent = this.$change.asObservable();

    public changeText(){
      this.$change.next("Child changed title");
    }
}

子组件：

import { Component, Host, HostBinding } from '@angular/core';
import { AppComponent } from '../app.component';
import { AppService } from '../app.service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @HostBinding('title') title;

  constructor(@Host() public parent: AppComponent, private serivce: AppService) { }
  public magic(){
    this.serivce.changeText();
  }
}

父组件

import { Component } from '@angular/core';
import { AppService} from './app.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'Title from parent';

  constructor(private service: AppService){
    this.service.closeEvent
    .subscribe( evt => {
      if(!!evt){
        this.title = evt;
      }
    })
  }
}

app module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { AppService } from './app.service';
import { ChildComponent } from './child/child.component';

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

当您单击“单击我”时，文本将从您的子组件触发的更改中更改

Answer 2

听起来像this应该是你想要的。

您首先需要一个@Input()，它将从父级获取当前值。此外，你需要一个将发出新值的@Output()。

例如

parent.html

<kendo-numerictextbox [(value)]="quantity">
</kendo-numerictextbox>

child.ts

@Input() value: string;
@Output() valueChange = new EventEmiter<string> = new EventEmiter<string>();

public someEvent(newString: string) {
 this.valueChange.emit(newString)
}