import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-bind',
  template: `
    <div>
      <div>Name: {{ name }}</div>
      <input type="text" style="width: 300px;" nz-input name="name" [(ngModel)]="name" autocomplete="off">
    </div>
  `
})
export class BindComponent implements OnInit {
  name = '';
  constructor() { }
  ngOnInit(): void { }
}

效果圖

自定義雙向綁定屬性

組件-html

<div>
  <div>inner: {{ value }}</div>
  <input style="width: 300px;" nz-input (input)="onInput(input.value)" #input autocomplete="off">
</div>

組件-ts

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
@Component({
  selector: 'app-inner',
  templateUrl: './inner.component.html',
  styleUrls: ['./inner.component.scss']
})
export class InnerComponent implements OnInit {
  // 設(shè)定輸入屬性
  @Input() value!: string;
  // 設(shè)定輸出事件
  @Output() valueChange: EventEmitter<string> = new EventEmitter();
  constructor() { }
  ngOnInit(): void { }
  onInput(value: string){
    // 觸發(fā)輸出事件-輸出數(shù)據(jù)
    this.valueChange.emit(value);
  }
}

外部使用

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-outer',
  template: `
    <div>
      <div>Name: {{ name }}</div>
      <app-inner [(value)]="name"></app-inner>
    </div>
  `
})
export class OuterComponent implements OnInit {
  name = '';
  constructor() { }
  ngOnInit(): void { }
}

效果圖

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

您可能感興趣的文章:

相關(guān)文章

詳解Angular組件之投影
在html規(guī)范里面,它定義了非常多的標(biāo)簽,在這些標(biāo)簽里面,相同標(biāo)簽之間的嵌套,不同標(biāo)簽之間的嵌套,是十分常見(jiàn),在Angular里面,我們可以通過(guò)自定義標(biāo)簽的方式引用組件,這里的標(biāo)簽?zāi)芊裣裨膆tml標(biāo)簽一樣,來(lái)嵌入html標(biāo)簽,或者嵌套其他組件標(biāo)簽?zāi)?本文將介紹投影的作用。
2021-05-05
Angularjs自定義指令實(shí)現(xiàn)分頁(yè)插件(DEMO)
由于最近的一個(gè)項(xiàng)目使用的是angularjs1.0的版本，涉及到分頁(yè)查詢數(shù)據(jù)的功能，后來(lái)自己就用自定義指令實(shí)現(xiàn)了該功能，下面小編把實(shí)例demo分享到腳本之家平臺(tái)，需要的朋友參考下
2017-09-09
Angular應(yīng)用tsconfig.json中的lib屬性示例解析
這篇文章主要介紹了Angular應(yīng)用tsconfig.json中的lib屬性示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-07-07
AngularJS基礎(chǔ) ng-mouseover 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-mouseover 指令,這里幫大家整理了AngularJS 指令的基礎(chǔ)知識(shí),并附代碼示例,有興趣的小伙伴可以參考下
2016-08-08
Angular 常用指令實(shí)例總結(jié)整理
這篇文章主要介紹了Angular 常用指令實(shí)例總結(jié)整理的相關(guān)資料,本文整理了常用指令，大家可以參考使用，需要的朋友可以參考下
2016-12-12
Angular.js與node.js項(xiàng)目里用cookie校驗(yàn)賬戶登錄詳解
這篇文章主要介紹了Angular.js與node.js項(xiàng)目里用cookie校驗(yàn)賬戶登錄的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-02-02
ionic3實(shí)戰(zhàn)教程之隨機(jī)布局瀑布流的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于ionic3實(shí)戰(zhàn)教程之隨機(jī)布局瀑布流的實(shí)現(xiàn)方法，文中通過(guò)示例代碼和圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2017-12-12
Angular中ng-template和ng-container的應(yīng)用小結(jié)
Angular的日常工作中經(jīng)常會(huì)使用到ng-template和ng-container，本文對(duì)他們做一個(gè)總結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2022-06-06
Angularjs在360兼容模式下取數(shù)據(jù)緩存問(wèn)題的解決辦法
這篇文章主要為大家詳細(xì)介紹了Angularjs在360兼容模式下取數(shù)據(jù)緩存問(wèn)題的解決辦法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法
AngularJS是一款優(yōu)秀的前端JS框架，已經(jīng)被用于Google的多款產(chǎn)品當(dāng)中。下面通過(guò)本文給大家分享使用AngularJS對(duì)表單提交內(nèi)容進(jìn)行驗(yàn)證的操作方法，需要的的朋友參考下吧
2017-07-07