Mention提及

    用于在输入中提及某人或某事，常用于发布、聊天或评论功能。

    基本使用

    基本使用

    3. @Component({
    4.   selector: 'nz-demo-mention-basic',
    5.   encapsulation: ViewEncapsulation.None,
    6.   template: `
    7.     <nz-mention [nzSuggestions]="suggestions" (nzOnSelect)="onSelect($event)">
    8.       <input placeholder="input here" nzMentionTrigger nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" />
    9.     </nz-mention>
    10.   `
    11. })
    12. export class NzDemoMentionBasicComponent {
    13.   inputValue: string = '@afc163';
    14.   suggestions = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];
    16.   onChange(value: string): void {
    17.     console.log(value);
    18.   }
    20.   onSelect(suggestion: string): void {
    21.     console.log(`onSelect ${suggestion}`);
    22.   }
    23. }

    Mention提及 - 图2

    异步加载

    匹配内容列表为异步返回时。

    1. import { Component, ViewEncapsulation } from '@angular/core';
    2. import { MentionOnSearchTypes } from 'ng-zorro-antd/mention';
    4. @Component({
    5.   selector: 'nz-demo-mention-async',
    6.   encapsulation: ViewEncapsulation.None,
    7.   template: `
    8.     <nz-mention [nzSuggestions]="suggestions" [nzLoading]="loading" (nzOnSearchChange)="onSearchChange($event)">
    9.       <input nzMentionTrigger nz-input [(ngModel)]="inputValue" />
    10.     </nz-mention>
    11.   `
    12. })
    13. export class NzDemoMentionAsyncComponent {
    14.   inputValue?: string;
    15.   loading = false;
    16.   suggestions: string[] = [];
    18.   onSearchChange({ value }: MentionOnSearchTypes): void {
    19.     console.log(`search: ${value}`);
    20.     this.loading = true;
    21.     this.fetchSuggestions(value, suggestions => {
    22.       console.log(suggestions);
    23.       this.suggestions = suggestions;
    24.       this.loading = false;
    25.     });
    26.   }
    28.   fetchSuggestions(value: string, callback: (suggestions: string[]) => void): void {
    29.     const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
    30.     setTimeout(() => {
    31.       return callback(users.filter(item => item.indexOf(value) !== -1));
    32.     }, 500);
    33.   }
    34. }

    头像

    自定义建议（含头像）

    注意，nzSuggestions 不为 string[] 时，需要提供 nzValueWith。

    1. import { Component, ViewEncapsulation } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-mention-avatar',
    5.   encapsulation: ViewEncapsulation.None,
    6.   template: `
    7.     <nz-mention [nzSuggestions]="webFrameworks" [nzValueWith]="valueWith" (nzOnSelect)="onSelect($event)">
    8.       <input nz-input nzMentionTrigger [(ngModel)]="inputValue" />
    9.       <ng-container *nzMentionSuggestion="let framework">
    10.         <nz-avatar nzSize="small" [nzText]="framework.name" [nzSrc]="framework.icon"></nz-avatar>
    11.         <span>{{ framework.name }} - {{ framework.type }}</span>
    12.       </ng-container>
    13.     </nz-mention>
    14.   `,
    15.   styles: [
    16.     `
    17.       .ant-avatar.ant-avatar-sm {
    18.         width: 14px;
    19.         height: 14px;
    20.         margin-right: 8px;
    21.         position: relative;
    22.       }
    23.     `
    24.   ]
    25. })
    26. export class NzDemoMentionAvatarComponent {
    27.   inputValue?: string;
    28.   webFrameworks = [
    29.     { name: 'React', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/LFIeMPzdLcLnEUe.svg' },
    30.     { name: 'Angular', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/PJTbxSvzYWjDZnJ.png' },
    31.     { name: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png' }
    32.   ];
    34.   valueWith = (data: { name: string; type: string; icon: string }) => data.name;
    36.   onSelect(value: string): void {
    37.     console.log(value);
    38.   }
    39. }

    多行

    多行模式。

    1. import { Component, ViewEncapsulation } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-mention-multilines',
    5.   encapsulation: ViewEncapsulation.None,
    7.     <nz-mention [nzSuggestions]="suggestions">
    8.       <textarea nz-input [nzAutosize]="{ minRows: 4, maxRows: 4 }" [(ngModel)]="inputValue" nzMentionTrigger> </textarea>
    9.     </nz-mention>
    10.   `
    11. })
    12. export class NzDemoMentionMultilinesComponent {
    13.   inputValue?: string;
    14.   suggestions = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];
    15. }

    Mention提及 - 图5

    自定义触发字符

    通过 nzPrefix 属性自定义触发字符。默认为 @, 可以定义为数组。

    向上展开

    向上展开建议。

    1. import { Component, ViewEncapsulation } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-mention-placement',
    5.   encapsulation: ViewEncapsulation.None,
    6.   template: `
    7.     <nz-mention nzPlacement="top" [nzSuggestions]="suggestions" (nzOnSelect)="onSelect($event)">
    8.       <input nzMentionTrigger nz-input [(ngModel)]="inputValue" (ngModelChange)="onChange($event)" />
    9.     </nz-mention>
    10.   `
    11. })
    12. export class NzDemoMentionPlacementComponent {
    13.   inputValue?: string;
    14.   suggestions = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];
    16.   onChange(value: string): void {
    17.     console.log(value);
    18.   }
    20.   onSelect(suggestion: string): void {
    21.     console.log(`onSelect ${suggestion}`);
    22.   }
    23. }

    Mention提及 - 图7

    自定义建议

    自定义建议

    1. import { Component, ViewEncapsulation } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-mention-custom-tag',
    5.   encapsulation: ViewEncapsulation.None,
    6.   template: `
    7.     <nz-mention [nzSuggestions]="webFrameworks" [nzValueWith]="valueWith" (nzOnSelect)="onSelect($event)">
    8.       <input placeholder="@someone" nz-input nzMentionTrigger [(ngModel)]="inputValue" />
    9.       <ng-container *nzMentionSuggestion="let framework">
    10.         <span>{{ framework.name }} - {{ framework.type }}</span>
    11.       </ng-container>
    12.     </nz-mention>
    13.   `
    14. })
    15. export class NzDemoMentionCustomTagComponent {
    16.   inputValue?: string;
    17.   webFrameworks = [
    18.     { name: 'React', type: 'JavaScript' },
    19.     { name: 'Angular', type: 'JavaScript' },
    20.     { name: 'Laravel', type: 'PHP' },
    21.     { name: 'Flask', type: 'Python' },
    22.     { name: 'Django', type: 'Python' }
    23.   ];
    25.   valueWith = (data: { name: string; type: string }) => data.name;
    27.   onSelect(value: string): void {
    28.     console.log(value);
    29.   }
    30. }

    配合 Form 使用

    受控模式，例如配合 Form 使用。

    1. import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
    2. import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
    3. import { NzMentionComponent } from 'ng-zorro-antd/mention';
    5. @Component({
    6.   selector: 'nz-demo-mention-controlled',
    7.   encapsulation: ViewEncapsulation.None,
    8.   template: `
    9.     <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    10.       <nz-form-item>
    11.         <nz-form-label [nzSm]="6" nzFor="mention">Top coders</nz-form-label>
    12.         <nz-form-control [nzSm]="16" nzErrorTip="More than one must be selected!">
    13.           <nz-mention #mentions [nzSuggestions]="suggestions">
    14.             <input id="mention" placeholder="input here" formControlName="mention" nzMentionTrigger nz-input />
    15.           </nz-mention>
    16.         </nz-form-control>
    17.       </nz-form-item>
    18.       <nz-form-item nz-row style="margin-bottom:8px;">
    19.           <button type="button" nz-button nzType="primary" (click)="submitForm()">Submit</button>
    20.           &nbsp;&nbsp;&nbsp;
    21.           <button type="button" nz-button (click)="resetForm()">Reset</button>
    22.         </nz-form-control>
    23.       </nz-form-item>
    24.     </form>
    25.   `
    26. })
    27. export class NzDemoMentionControlledComponent implements OnInit {
    28.   suggestions = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];
    29.   validateForm!: FormGroup;
    30.   @ViewChild('mentions', { static: true }) mentionChild!: NzMentionComponent;
    32.   get mention(): AbstractControl {
    33.     return this.validateForm.get('mention')!;
    34.   }
    36.   constructor(private fb: FormBuilder) {}
    38.   ngOnInit(): void {
    39.     this.validateForm = this.fb.group({
    40.       mention: ['@afc163 ', [Validators.required, this.mentionValidator]]
    41.     });
    42.   }
    44.   mentionValidator = (control: FormControl): { [s: string]: boolean } => {
    45.     if (!control.value) {
    46.       return { required: true };
    47.     } else if (this.mentionChild.getMentions().length < 2) {
    48.       return { confirm: true, error: true };
    49.     }
    50.     return {};
    51.   };
    53.   submitForm(): void {
    54.     this.mention.markAsDirty();
    55.     this.mention.updateValueAndValidity();
    56.     if (this.mention.valid) {
    57.       console.log('Submit!!!', this.mention.value);
    58.       console.log(this.mentionChild.getMentions());
    59.     } else {
    60.       console.log('Errors in form!!!');
    61.     }
    62.   }
    64.   resetForm(): void {
    65.     this.validateForm?.reset({
    66.       mention: '@afc163 '
    67.     });
    68.   }
    69. }

    Mention提及 - 图9

    无效或只读

    通过 disabled 属性设置是否生效。通过 readOnly 属性设置是否只读。

    1. import { Component, ViewEncapsulation } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-mention-readonly',
    5.   encapsulation: ViewEncapsulation.None,
    6.   template: `
    7.     <nz-mention [nzSuggestions]="suggestions">
    8.       <input
    9.         style="margin-bottom: 10px"
    10.         placeholder="this is disabled Mention"
    11.         nzMentionTrigger
    12.         nz-input
    13.         disabled
    14.         [(ngModel)]="inputValue"
    15.       />
    16.       <input placeholder="this is readOnly Mention" nzMentionTrigger nz-input readOnly [(ngModel)]="inputValue" />
    17.     </nz-mention>
    18.   `
    19. })
    20. export class NzDemoMentionReadonlyComponent {
    21.   inputValue?: string;
    22.   suggestions = ['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご'];
    23. }

    预览

    渲染提及

    1. <nz-mention [nzSuggestions]="suggestions">
    2.  <textarea
    3.     nz-input
    4.     [(ngModel)]="value"
    5.     nzMentionTrigger>
    6.   </textarea>
    7. </nz-mention>

    方法

    用于指定提及的触发元素

    1. <nz-mention>
    2.  <textarea nzMentionTrigger></textarea>
    3. </nz-mention>
    1. <nz-mention>
    2.  <input nzMentionTrigger>
    3. </nz-mention>

    自定义建议渲染模板

    1.   <nz-mention
    2.     [nzSuggestions]="items"
    3.     [nzValueWith]="valueWith">
    4.     <input nz-input nzMentionTrigger>
    5.     <ng-container *nzMentionSuggestion="let item">
    6.         <span>{{ item.label }} - {{ item.value }}</span>
    7.     </ng-container>
    8.   </nz-mention>