Angular通过实现ControlValueAccessor接口来实现自定义表单组件，在模版驱动表单和响应式表单下实现数据的双向绑定,本文通过封装一个已有的Input组件，来添加tooltip的功能


## 组件代码
```ts
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, Input, OnChanges, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'tl-tuiwrap-input',
  templateUrl: './input-wrap.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => TlInputWrapComponent),
      multi: true
    }
  ],
  preserveWhitespaces: false,
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    '[class.tl-tuiwrap-input]': 'true',
  }
})
export class TlInputWrapComponent implements OnInit, OnDestroy, ControlValueAccessor, OnChanges {

  _value:any

  @Input()
  tlPlaceholder = "请输入"

  @Input()
  tlReadonly = false

  @Input()
  tlDisabled = false

  @Input()
  tlTooltip = true

  showTooltip = false; // 鼠标滑过overflow文本时，再检查是否需要显示

  @ViewChild('contentRef')
  contentRef: any;

  // 输入框数据变化时
  onChange: (value: string) => void = () => null;
  onTouched: () => void = () => null;

  constructor(private cdr: ChangeDetectorRef) {}
  ngOnDestroy(): void {
    
  }

  get nzValue(): string {
    return this._value;
  }

  set nzValue(input: string) { 
    if (this._value === input) {
      return;
    }

    this._value = input;

    this.onChange(input)
  }

  // 向视图写入数据
  writeValue(obj: any): void {
    //console.log("writeValue: ",obj);
    //this._value = obj
    this.nzValue = obj
    this.cdr.markForCheck();
  }

  // UI界面值发生更改，调用注册的回调函数
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // 在blur（等失效事件），调用注册的回调函数
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // 设置禁用状态
  setDisabledState?(isDisabled: boolean): void {
    this.tlDisabled = isDisabled
    
  }
  ngOnChanges(): void {
    //console.log(changes);
    
  }

  ngOnInit(): void {}

  handleTooltipIn() {
    if(this.tlTooltip){
      const $content = this.contentRef.nativeElement;
      this.showTooltip = $content.scrollWidth > $content.offsetWidth;
    }
    
  }
}

```

```html
<input
  class="tl-tuiwrap-input-container"
  tInputText
  [disabled]="tlDisabled"
  [readonly]="tlReadonly"
  [placeholder]="tlPlaceholder || '请输入'"
  [(ngModel)]="nzValue"
  autocomplete="off"
  tTooltip="{{ nzValue }}"
  tooltipPosition="bottom"
  [tooltipDisabled]="!showTooltip"
  (mouseenter)="handleTooltipIn()"
  #contentRef
/>
```

```less
.tl-input-wrap{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-tuiwrap-input-container{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
```

效果如下

![image.png](/static/img/b682a217c7da54499dc244a9e28f1869.image.webp)


![image.png](/static/img/4781362e6939de356c08b2df4cc1f215.image.webp)

Angular自定义表单组件

在我们的业务里，我们通常会二次封装一些高频业务组件。对于封装组件有一个大原则就是我们应该尽量保持原有组件的接口，除了我们需要封装的功能外，我们不应该改变原有组件的接口，即保持原有组件提供的接口如props,events,slots等不变。这里我们对element plus 的input组件做二次封装为例，Vue版本3.3.4 element-plus版本2.3.8


组件二次封装需要解决一下问题
- 支持原组件所有的属性和方法：$attrs解决
- 支持原组件的插槽
- 方便获取源组件所有的方法

这里我们对element plus的input组件简单封住一下，就是作为演示用的
MyInput.vue

```vue

<template>
  <div class="myinput">
    <span class="label">{{label}}</span>
    
    <el-input v-bind="filteredAttrs" :clearable="clearable" ref="input">
      <template #[slotName]="slotProps" v-for="(slot, slotName) in $slots" >
          <slot :name="slotName" v-bind="slotProps"></slot>
      </template>
    </el-input>
  </div>
</template>

<script lang="ts" setup>
import {useAttrs,computed,ref } from 'vue'
import { ElInput } from 'element-plus'
defineOptions({
  name: 'MyInput'
})

defineProps({
  label: String,
  clearable: {
    type: Boolean,
    default: true,
  },
});

const input = ref();

defineExpose({
  input
});

const attrs = useAttrs()

// 如果我们不希望透传某些属性比如class, 我们可以通过useAttrs来实现
const filteredAttrs = computed(() => {
  return { ...attrs, class: undefined };
});

</script>
<style lang="scss" scoped>
.myinput{
  .label{
    color: #333;
  }
}
</style>

```

上面使用defineExpose + ref的组合来获取源组件上的实例方法

在其他组件里面使用MyInput
```vue
<template>
  <div class="about">
    <MyInput v-model="inputvalue" label="myinput" @input="inputHandle" ref="myInput">
      <template #prepend>
        <el-select v-model="select" placeholder="请选择" style="width: 115px">
          <el-option label="HTTPS" value="1" />
          <el-option label="HTTP" value="2" />
        </el-select>
      </template>
      <template #append>
        <el-button :icon="Search" />
      </template>
    </MyInput>
    {{ inputvalue }}
  </div>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { ElButton, ElSelect, ElOption } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import MyInput from '../components/myinputs/index.vue'

const inputvalue = ref('')
const select = ref('1')

const myInput = ref()

const inputHandle = (e: InputEvent) => {
  console.log(e)
}
  onMounted(() => {
    console.log(myInput.value.input);
    myInput.value.input.focus()
    
  })
</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>

```

![image.png](https://blog.qianxun.shop/static/img/dac90161bbcc9f0668707234e7d6f674.16.webp)
注意事项：
ref定义名称时，不要和组件名称相似，否则会报错的

Vue组件二次封装

snabbdom源码解读

![clipboard-2023-06-15.png](https://blog.qianxun.shop/static/img/6399197cff41337855cb0df2c1c9a828.36.webp)
某自定义组件如上图所示，在固定操作列左右各有一个插槽ng-template,如何匹配插槽内容



# 方案一: ContentChildren + 自定义指令(收集模板)

## 自定义指令 `nz-template.directive.ts`

```ts
import { Directive, Input, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
import { NzSafeAny } from "ng-zorro-antd/core/types";

@Directive({
  selector: '[nzTemplate]'
})
export class NzTemplateDirective implements OnInit {

  @Input('nzTemplate')
  name: string = "default"

  @Input()
  type: string = ""

  constructor(private viewContainer: ViewContainerRef, private template: TemplateRef<NzSafeAny>) {
    this.template = template;
  }
  ngOnInit(): void {
    this.viewContainer.createEmbeddedView(this.template)
  }
  getType() {
    return this.name;
  }
}
```

## 组件html模板
```html
<div [class]="['tl-handbar-container',styleClass]">
    <div class="tips-title">
        <span class="tips-titlespan"></span>
        <span class="tips-titletwo"></span>
        <i class="icon-line-chart"></i>
        {{title}}
    </div>
    <div class="tips-inner">
        <div class="breadcrumb-box">
            
        </div>
        <div class="tips-btns">
            <span class="ui-tips-span left" *ngIf="describe||leftTemplate">
                {{describe}}
                <ng-container *ngTemplateOutlet="leftTemplate"></ng-container>
            </span>
            <ng-container *ngFor="let item of actionButton">
                <button> 操作按钮</button>
            </ng-container>
            <span class="right-slot" *ngIf="rightTemplate">
                <ng-container *ngTemplateOutlet="rightTemplate"></ng-container>
            </span>            
        </div>
    </div>
</div>

```

## 组件 `nz-handleBar.component.ts`
```
import { AfterContentInit, Component, ContentChildren, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
import { NzTemplateDirective } from "./nz-template.directive"

@Component({
  selector: 'nz-handlebar',
  templateUrl: './handlebar-super.component.html',
  styleUrls: ['./handlebar-super.component.less'],
  host: {
    '[class.nz-handlebar]': 'true',
  }
})
export class NzHandleBarSuperComponent implements OnChanges, AfterContentInit {

  @Input()
  title?: string

  @Input()
  describe?: string

  @Input()
  styleClass?: string

  @ContentChildren(NzTemplateDirective)
  templates

  leftTemplate: TemplateRef<void>

  rightTemplate: TemplateRef<void>

  /** 操作栏 */
  @Input()
  actionButton?: ActionButtonType[]

  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {}

  ngAfterContentInit() {
    this.templates.forEach((item) => {
      switch (item.getType()) {
        case 'left':
          this.leftTemplate = item.template;
          break;
        case 'right':
          this.rightTemplate = item.template;
          break;
        default:
          this.leftTemplate = item.template;
          break;
      }
    });
  }
}
```

## 使用自定义组件
```html
<nz-handlebar
      title="测试页面" 
      [describe]="'描述信息'" 
      styleClass="xx2">   
      <ng-template nzTemplate="left">
        <button>Left</button>
      </ng-template>
      <ng-template nzTemplate="right">
        <button>Right</button>
      </ng-template>               
 </nz-handlebar>
```
注意: 使用这种方案时，ng-template要写在组件内部

# 方案二: @Input + 模板片段
这种方式，在自定义组件内部直接使用 @Input() 接收模板片段
```
import {Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
import { NzTemplateDirective } from "./nz-template.directive"

@Component({
  selector: 'nz-handlebar',
  templateUrl: './handlebar-super.component.html',
  styleUrls: ['./handlebar-super.component.less'],
  host: {
    '[class.nz-handlebar]': 'true',
  }
})
export class NzHandleBarSuperComponent implements OnChanges {

  @Input()
  title?: string

  @Input()
  describe?: string

  @Input()
  styleClass?: string

  @Input()
  leftTemplate: TemplateRef<void>

  @Input()
  rightTemplate: TemplateRef<void>

  /** 操作栏 */
  @Input()
  actionButton?: ActionButtonType[]

  constructor() { }

  ngOnChanges(changes: SimpleChanges): void {}

}

```

组件使用
```html
<nz-handlebar
      title="测试页面" 
      [describe]="'描述信息'" 
      styleClass="xx2"
      [leftTemplate]="left"
      [rightTemplate]="right">                
 </nz-handlebar>
 
 <ng-template #left>
    <button>Left</button>
  </ng-template>
  <ng-template #right>
    <button>Right</button>
  </ng-template>  
```

方案二比方案一更简单，方案一可以在指令内部可以做其它的事情

收集Angular组件内部插槽

自己的开源项目[meng-admin](http://meng-admin.qianxun.shop/meng-react-admin-preview/)登录环节告一段落，部署到线上时遇到了很多问题，例如前端vite开启了base以及使用browser路由模式404的问题，具体的nginx配置见下文




![image.png](/static/img/4920ca3b3021f416b43d03f43a5497c0.image.webp)
前端项目开启了base

![image.png](/static/img/23a154514372159fc83305ee9fea5b8e.image.webp)

![image.png](/static/img/cd03cf06ea61a30dfc4b35000b3024c0.image.webp)

nginx配置如下
```nginx.conf
server {
        listen       8091;
        server_name  localhost; 

        location /meng-react-admin-preview {
            alias   /usr/local/nginx/meng-admin/;
            # nginx 配置优先使用路由( try_files 和 autoindex配置)，不自动指向index.html 解决在browser路由模式下刷新404的问题
            try_files $uri $uri/ /meng-react-admin-preview/index.html;
            index  index.html index.htm;
            autoindex on;
            gzip on;
        }
        location /ma/api {
            # axios接口转发
            rewrite ^/ma/(.*)$ /$1 break;
            proxy_pass http://127.0.0.1:8090;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Upgrade $http_upgrade;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

```