我的第一个angular指令,遍历table下的td,替换数据格式

Posted 2023-04-27

参考技术A 把后端返回数据为null或者空或者undefined的用斜杠替换

思路:一开始的时候我是想写一个服务,双循环数据,把数据转变成斜杠,这样就减少了在页面处理逻辑,后来经过同事的建议,还是决定写一个指令,因为所使用的这个系统为考核系统,里面除了弹窗,几乎都是用table写的,所以决定在table上写一个指令,遍历下面所有的td,当td绑定的数据为null或者空或者undefined的时候替换成斜杠,这样就不需要每次都依赖注入一遍.说来惭愧,从事前端9个月,这是我第一次自己写指令.加油!

一.   遍历table知识点

       1. rows 集合返回表格中所有行（TableRow 对象）的一个数组，即一个 htmlCollection。

            该集合包括 、 和 中定义的所有行。

        2.cells 集合返回表格中所有单元格的一个数组

二 .  指令知识点

    1.scope作用域    一招制敌 - 玩转 AngularJS 指令的 Scope (作用域) - 技术风暴 - SegmentFault 思否  可以参考这篇文章

三种形式

默认 false  从父级作用域继承,双向绑定,改变一方的内容,另一方也会跟着变化

true   也是从父级作用域继承,和false的区别在于当指令里的数据改变时,父级作用域的数据不会改变,但是父级作用域改变时,子级会发生改变

,可以简单的理解为自定义作用域,=表示双向绑定,@符表示单向绑定,&符绑定函数.

怎么传参&表现形式

restrict：String，E（元素）<my-directive></my-directive>

 A（属性，默认值） <div my-directive="expression"></div>

 C（类名）<div class="my-directive:expression"></div>

 M（注释）<--directive:my-directive expression-->

三. 注意点

1.需要在table表格ng-repert完成后再执行指令,简单的说就是要数据渲染完再执行指令,需要在指令里写timeout

2.还有就是$watch监控数据变化,在页面渲染完成后再去执行指令,但是当没有数据或者数据为空的时候则不需要执行指令

下面是改良版,最近其实在学习dom操作的视频,但是一开始写指令的时候下意识的就去百度了怎么遍历table,然后双循环被吐槽了,emmmm

angular2 指令可以访问它所应用的组件的模板吗？

【中文标题】angular2 指令可以访问它所应用的组件的模板吗？

【英文标题】：Can an angular2 directive access the template of a component it's applied to?

【发布时间】：2017-02-04 05:38:49

【问题描述】：

感谢 Gunter 的回答更新，现在我更好地理解了我在问什么：

如果我正在编写自定义指令并计划将其应用于组件，那么让我的指令查询该组件的模板的最佳方式是什么？

我正在编写一个属性指令，其目的只是更改它在其宿主中找到的第一个自定义按钮组件的样式。如果主机本身是我的自定义按钮组件，它会出于某种原因出现在我的指令的 ContentChildren 查询中。如果主机在其模板中包含我的自定义按钮组件，我的指令将找不到它。

这是我的指令：

import  Directive, AfterViewInit, AfterContentInit, ContentChildren, QueryList, ViewChild, ElementRef  from '@angular/core';
import  MyCustomButtonComponent  from './my-custom-button.component';

@Directive(
    selector: '[specialButton]'
)
export class SpecialButtonDirective implements AfterViewInit, AfterContentInit 

    hostElement: ElementRef;
    @ViewChild(MyCustomButtonComponent) myCustomButtonViewChild;
    @ContentChildren(MyCustomButtonComponent, descendants: true) myCustomButtonQueryList: QueryList<MyCustomButtonComponent>;

    constructor(el: ElementRef) 
        this.hostElement = el;
    

    ngOnInit() 
        //Should I query here? Via this.hostElement.nativeElement.querySelector(...) perhaps?
    

    ngAfterContentInit(): void 
        console.log('Value of myCustomButtonQueryList.first [' + this.myCustomButtonQueryList.first + ']');
    
    ngAfterViewInit(): void 
        console.log('Value of myCustomButtonViewChild [' + this.myCustomButtonViewChild + ']');
    

然后在我的主要组件中，它的指令中包括 MyCustomButtonComponent 和 SpecialButtonDirective：

<my-custom-button specialButton>Host is Button</my-custom-button>
<!-- Value of myCustomButtonQueryList.first [[object Object]] -->
<!-- Value of myCustomButtonViewChild [undefined] -->

<!--The dropdown toggle button is a my-custom-button in my-custom-dropdown's template -->
<my-custom-dropdown specialButton>
    <ul>
        <li><div>Item 1</div></li>
        <li><div>Item 2</div></li>
    </ul>
</my-custom-dropdown>
<!-- Value of myCustomButtonQueryList.first [undefined] -->
<!-- Value of myCustomButtonViewChild [undefined] -->

我不明白为什么第一个示例找到了我的自定义按钮组件，因为我认为 ContentChildren 只在 ng-content 标签中搜索，但它正在获取主机 MyCustomButtonComponent。

我不明白为什么第二个示例不起作用，因为我认为 ViewChild 应该搜索 my-custom-dropdown 的模板？然而它并没有在那里找到 MyCustomButtonComponent 的实例。

【参考方案1】：

指令没有视图，因此@ViewChild() 不起作用。 @ContentChildren() 是支持的。

【讨论】：

谢谢！那么指令有没有办法获取在其应用的组件的模板中定义的内容？例如。如果我将指令应用于我的组件 - my-custom-dropdown - 我的指令是否可以访问在 my-custom-dropdown 的模板中定义的另一个组件？

我已经更新了我的问题，因为我更好地理解了我真正要问的问题。