第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

Angular ng-content 不適用于 mat-form-field

Angular ng-content 不適用于 mat-form-field

大話西游666 2023-03-03 13:34:36
我的目標(biāo)：我正在嘗試構(gòu)建一個(gè)帶有清除按鈕的可重復(fù)使用的 mat-form-field。我如何嘗試實(shí)現(xiàn)我的目標(biāo)：我創(chuàng)建了一個(gè)“mat-clearable-input”組件并像這樣使用它：<mat-clearable-input>        <mat-label>Put a Number here pls</mat-label>        <input matInput formControlName="number_form_control">    </mat-clearable-input>mat-clearable-input.component.html<mat-form-field>    <ng-content></ng-content></mat-form-field>預(yù)期結(jié)果：ng-content 標(biāo)簽獲取標(biāo)簽和輸入并將它們放入 mat-form-field 標(biāo)簽中。實(shí)際結(jié)果：Error: mat-form-field must contain a MatFormFieldControl.    at getMatFormFieldMissingControlError (form-field.js:226)    at MatFormField._validateControlChild (form-field.js:688)    at MatFormField.ngAfterContentChecked (form-field.js:558)    at callHook (core.js:2926)    at callHooks (core.js:2892)    at executeInitAndCheckHooks (core.js:2844)    at refreshView (core.js:7239)    at refreshComponent (core.js:8335)    at refreshChildComponents (core.js:6991)    at refreshView (core.js:7248)看起來(lái)我遺漏了一些東西而且我沒(méi)有正確使用 ng-content 標(biāo)簽。我無(wú)法在 angular 網(wǎng)站上找到 ng-content 標(biāo)簽的文檔。感謝您的任何幫助。在下面回答后編輯所以我嘗試了這個(gè)建議的方法：export class MatClearableInputComponent implements OnInit {  @ContentChild(MatFormFieldControl) _control: MatFormFieldControl<any>;  @ViewChild(MatFormField) _matFormField: MatFormField;  // see https://stackoverflow.com/questions/63898533/angular-ng-content-not-working-with-mat-form-field/  ngOnInit() {    this._matFormField._control = this._control;  }}不幸的是，當(dāng)我嘗試在表單中使用它時(shí)，它仍然失敗并出現(xiàn)錯(cuò)誤“錯(cuò)誤：mat-form-field 必須包含 MatFormFieldControl”。我嘗試以某種形式使用此組件的代碼：<mat-clearable-input>    <mat-label>Numero incarico</mat-label>    <buffered-input matInput formControlName="numero"></buffered-input></mat-clearable-input>在 stackblitz 上重現(xiàn)：https://stackblitz.com/edit/angular-material-starter-xypjc5 ?file=app/clearable-form-field/clearable-form-field.component.html請(qǐng)注意 mat-form-field 功能如何不起作用（沒(méi)有輪廓，沒(méi)有浮動(dòng)標(biāo)簽），同時(shí)打開控制臺(tái)，您將看到錯(cuò)誤錯(cuò)誤：mat-form-field 必須包含 MatFormFieldControl。選項(xiàng) 2 發(fā)布后編輯我試過(guò)這樣做：<mat-form-field>  <input matInput hidden>  <ng-content></ng-content></mat-form-field>它有效，但是當(dāng)我在我的表單字段中添加一個(gè) mat-label 時(shí)，如下所示：      
查看完整描述

3 回答

?
繁星點(diǎn)點(diǎn)滴滴

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超3個(gè)贊

另一種解決方案是使用指令來(lái)實(shí)現(xiàn)行為。


import {

  AfterViewInit,

  Component,

  ComponentFactory,

  ComponentFactoryResolver,

  ContentChild,

  Directive,

  Injector,

  Input,

  Optional,

  SkipSelf,

  TemplateRef,

  ViewContainerRef,

} from '@angular/core';

import { MatFormFieldControl } from '@angular/material/form-field';



@Directive({

  selector: '[appClearable]'

})

export class ClearableDirective implements AfterViewInit {


  @ContentChild(MatFormFieldControl) matInput: MatFormFieldControl<any>;

  @Input() appClearable: TemplateRef<any>;

  private factory: ComponentFactory<ClearButtonComponent>;


  constructor(

    private vcr: ViewContainerRef,

    resolver: ComponentFactoryResolver,

    private injector: Injector,

  ) {

    this.factory = resolver.resolveComponentFactory(ClearButtonComponent);

  }


  ngAfterViewInit(): void {

    if (this.appClearable) {

      this.vcr.createEmbeddedView(this.appClearable);

    } else {

      this.vcr.createComponent(this.factory, undefined, this.injector);

    }

  }


  /**

   * This is used to clear the formControl oder HTMLInputElement

   */

  clear(): void {

    if (this.matInput.ngControl) {

      this.matInput.ngControl.control.reset();

    } else {

      this.matInput.value = '';

    }

  }

}


/**

 * This is the markup/component for the clear-button that is shown to the user.

 */

@Component({

  selector: 'app-clear-button',

  template: `

  <button (click)="clearHost()">Clear</button>

  `

})

export class ClearButtonComponent {

  constructor(@Optional() @SkipSelf() private clearDirective: ClearableDirective) { }


  clearHost(): void {

    if (this.clearDirective) {

      this.clearDirective.clear();

    }

  }

}

這會(huì)appClearable為后備布局創(chuàng)建一個(gè)名為的指令和一個(gè)可選的組件。確保將組件和指令添加到declarations模塊的 -array 中。您可以指定用于提供用戶界面的模板，也可以將其ClearButtonComponent用作通用的解決方案。標(biāo)記如下所示：


<!-- Use it with a template reference -->

<mat-form-field [appClearable]="clearableTmpl">

  <input type="text" matInput [formControl]="exampleInput">

</mat-form-field>


<!-- use it without a template reference -->

<mat-form-field appClearable>

  <input type="text" matInput [formControl]="exampleInput2">

</mat-form-field>


<ng-template #clearableTmpl>

  <button (click)="exampleInput.reset()">Marked-Up reference template</button>

</ng-template>

無(wú)論是否使用 ngControl/FormControl，這都適用，但您可能需要根據(jù)您的用例對(duì)其進(jìn)行調(diào)整。


查看完整回答
反對(duì) 回復(fù) 2023-03-03
?
紅顏莎娜

TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超13個(gè)贊

從 2022 年的 Angular 14 開始，MatFormField 的問(wèn)題已經(jīng)針對(duì)angular/angular#37319關(guān)閉，沒(méi)有解決方案。如果您需要它工作，以下似乎是現(xiàn)在可以使用<ng-content>with的最佳解決方案mat-form-field：


@Component({

  selector: 'my-input-wrapper',

  template: `

    <mat-form-field appearance="standard">

      <ng-content></ng-content>

      <!-- make sure this is destroyed so all bindings/subscriptions are removed-->

      <input *ngIf="isBeforeViewInit$$ | async" hidden matInput />

    </mat-form-field>

  `,

});

class MyInputWrapper implement AfterViewInit {

  isBeforeViewInit$$ = new BehaviorSubject(true);

  @ContentChild(MatFormFieldControl) matFormControl: MatFormFieldControl<unknown>;

  @ViewChild(MatFormField) matFormField: MatFormField;


  ngAfterViewInit() {

    // replace the reference to the dummy control

    this.matFormField._control = this.matFormControl;

    // force the form field to rebind everything to the actual control

    this.matFormField.ngAfterContentInit();

    this.isBeforeViewInit$$.next(false);

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-03-03
?
千萬(wàn)里不及你

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超9個(gè)贊

更新：


選項(xiàng) 1 不適用于新的角度版本，因?yàn)樵阢^子@ViewChild()中返回未定義。ngOnInit()另一個(gè)技巧是使用假人MatFormFieldControl-


選項(xiàng) 2


<mat-form-field>

  <input matInput hidden>

  <ng-content></ng-content>

</mat-form-field>

編輯：


拋出該錯(cuò)誤是因?yàn)镸atFormField組件查詢使用的子內(nèi)容@ContentChild(MatFormFieldControl)如果您使用嵌套則不起作用ng-content（MatFormField 也使用內(nèi)容投影）。


選項(xiàng) 1（已棄用）


以下是如何讓它工作 -


@Component({

  selector: 'mat-clearable-input',

  template: `

    <mat-form-field>

      <ng-content></ng-content>

    </mat-form-field>

  `

})

export class FieldComponent implements OnInit { 

    @ContentChild(MatFormFieldControl) _control: MatFormFieldControl<any>;

    @ViewChild(MatFormField) _matFormField: MatFormField;


    ngOnInit() {

        this._matFormField._control = this._control;

    }

}

請(qǐng)檢查這個(gè) stackBlitz。此外，已經(jīng)創(chuàng)建了這個(gè)問(wèn)題github。



查看完整回答
反對(duì) 回復(fù) 2023-03-03
  • 3 回答
  • 0 關(guān)注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)