跳到内容
达斯

在Angular中创建自己的可七星彩中奖查询组件

1+

如何在Angular中创建自己的可七星彩中奖查询组件？

在上一篇文章中，我在Angular中实现了一个七星彩中奖查询过滤器管道。而且我很想知道如何在Angular中创建自己的可七星彩中奖查询组件。

在Angular中创建自己的可七星彩中奖查询组件
在Angular中创建自己的可七星彩中奖查询组件

如果要查看过滤器管道教程，请从下面的文章中获取它：

看更多:
角度的中的可七星彩中奖查询组件，在Angular中创建自己的Searchable组件
在一分钟内实现角度七星彩中奖查询过滤器
七星彩中奖查询过滤器是任何应用程序都需要的组件。

演示版

让 us 看到 what we are going to create 在 角度的.

在Angular中创建可七星彩中奖查询的模板
在Angular中创建可七星彩中奖查询的模板

以及代码的标记：

的HTML标记
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<input [对于mControl]=“ 七星彩中奖查询Control”>
<searchable-container [七星彩中奖查询词]=“ 七星彩中奖查询Control.value”>
 
  <ul>
    <li 可搜寻的=“ Java脚本” 可搜寻的Highlight></li>
    <li 可搜寻的=“角度” 可搜寻的Highlight></li>
    <li 可搜寻的=“打字稿” 可搜寻的Highlight></li>
    <li 可搜寻的=“ RxJS” 可搜寻的Highlight></li>
    <li 可搜寻的=秋田 可搜寻的Highlight></li>
  </ul>
  
</ 可七星彩中奖查询的容器>

创建可七星彩中奖查询的容器

我们想让我们的消费者有能力添加一个 可搜寻的 指令在模板层次结构中所需的任何位置。

为了实现这一目标，我们’发挥了强大的能力 元素注入器。如您所知，就像服务一样，我们可以要求Angular通过依赖注入为我们提供指令。我们’将使用此功能注册每个 可搜寻的 directive 在 our SearchableContainer component.

可七星彩中奖查询的组件
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@零件({
  选择器: “可七星彩中奖查询的容器”,
  模板: `
    <ng-内容></ng-内容>
  `
  changeDetection: 变更检测策略.OnPush
})
出口 类 SearchableContainerComponent {
  私人的 可七星彩中奖查询的： 可七星彩中奖查询指令[] = [];
 
  私人的 _术语 = '';
  @输入值('七星彩中奖查询词')
  组 术语(七星彩中奖查询词: 串) {
    这个._术语 = 七星彩中奖查询词 || '';
    这个.七星彩中奖查询(这个._术语);
  }
 
  得到 术语() {
    返回 这个._术语;
  }
 
  寄存器(可搜寻的: 可七星彩中奖查询指令) {
    这个.可七星彩中奖查询的.推(可搜寻的);
  }
 
  取消注册(可搜寻的: 可七星彩中奖查询指令) {
    这个.可七星彩中奖查询的 = 这个.可七星彩中奖查询的.过滤(当前 => 当前 ！== 可搜寻的);
  }
 
}

我们定义一个 输入 需要当前七星彩中奖查询字词并调用 七星彩中奖查询() method with 它 (we’稍后将演示此方法的实现）。

我们还公开了 寄存器 and 取消注册 searchable 指示s. 让’s move on to 的 可七星彩中奖查询指令.

创建可七星彩中奖查询指令

可七星彩中奖查询指令
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@指示({
  选择器: “ [可七星彩中奖查询]”
})
出口 类 可七星彩中奖查询指令 {
 
  代币 = '';
 
  @输入值()
  组 可搜寻的(值: 串) {
    这个.代币 = 值;
  }
 
  建设者(@可选的() 私人的 容器： SearchableContainerComponent, 私人的 主办： 元素引用) {
    如果 (!容器) {
      扔 新 错误(`失踪 <拿督-可搜寻的-容器> 包装纸 零件`);
    }
  }
 
  ngOnInit() {
    这个.容器.寄存器(这个);
  }
 
  隐藏() {
    这个.主办.nativeElement.类List.加('隐藏');
  }
 
  显示() {
    这个.主办.nativeElement.类List.去掉('隐藏');
  }
 
  ngOnDestroy() {
    这个.容器.取消注册(这个);
  }
}

如前所述，我们’重新要求Angular为我们提供 SearchableContainer 并注册当前实例。我们’re expecting 的 SearchableContainer 要展示的组件，所以我们’如果没有会抛出错误’t.

We’还将公开隐藏和显示本机宿主元素的方法。在这种情况下，我决定采用CSS策略，而不是使用结构性指令，因为DOM创建操作非常昂贵，’不想在用户每次七星彩中奖查询内容时创建和删除DOM元素。

是的，我知道我可以使用ViewContainerRef 在sert() 方法并保存对视图的引用以保留元素，但是对于我的需求来说似乎有点过时了。

如果出于某种原因需要此功能，则可以随时切换到结构指令。

实现search（）方法

七星彩中奖查询方式
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
七星彩中奖查询(七星彩中奖查询词: 串) {
  这个.handleSearchables(七星彩中奖查询词);
}  
 
私人的 handleSearchables(七星彩中奖查询词: 串) {
  对于 (const 可搜寻的 的 这个.可七星彩中奖查询的) {
    如果 (!七星彩中奖查询词) {
      可搜寻的.显示();
    } 其他 {
      如果 (这个.比赛(可搜寻的)) {
        可搜寻的.显示();
      } 其他 {
        可搜寻的.隐藏();
      }
    }
  }
}
 
私人的 比赛(可搜寻的: 可七星彩中奖查询指令) {
  返回 可搜寻的.代币.降低大小写().指数(这个._术语.降低大小写()) > -1;
}

收到新的七星彩中奖查询字词时，我们需要遍历 可搜寻的指令，检查是否有匹配项，并相应地运行相应的方法。

至此，我们进行了基本的工作七星彩中奖查询。但是设计师总是想要更多。我们要 突出 匹配项。 我们的应用程序中已经有一个专用管道可以精确地执行此操作，它看起来像这样：

用老式七星彩中奖查询
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<input [对于mControl]=“ 七星彩中奖查询Control”>
 
<searchable-container [七星彩中奖查询词]=“ 七星彩中奖查询Control.value”>
 
  <ul>
 
   <li 可搜寻的=“ Java脚本”>
    {{Javascript |高亮显示：searchControl.value}
   </li>
 
   <li 可搜寻的=“角度”>
    {{角|高亮显示：searchControl.value}
   </li>
 
   ...
  </ul>
  
</ 可七星彩中奖查询的容器>

虽然有效，但此解决方案’t my favorite. It 加s verbosity to 的 模板, 和 的n I need to repeat myself 和一个dd 的 七星彩中奖查询 值 对于 each element.

您知道如何在Angular中高效地获取大数据吗？

看更多:
角度的中的可七星彩中奖查询组件，在Angular中创建自己的Searchable组件
通过3种优化方式在Angular中获取大数据
呈现大列表的可用技术概述...

荧光笔取决于父母SearchContainer and also on Searchable可能是他的父母或在同一主机上。 那么，为什么不再次利用Angular元素注入器树并进行清理呢？

角元喷射器树
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
<searchable-container [七星彩中奖查询词]=“ 七星彩中奖查询Control.value”>
 
  <ul>
    <li 可搜寻的=“ Java脚本” 可搜寻的Highlight></li>
    
    <li 可搜寻的=“角度”>
      Learn <span 可搜寻的Highlight></span>//它可以在任何地方
    </li>
    ...
  </ul>
  
</ 可七星彩中奖查询的容器>

创建

SearchableHighlight指令
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@指示({
  选择器: “ [searchableHighlight]”
})
出口 类 SearchableHighlightDirective {
  建设者(@可选的() 私人的 容器： SearchableContainerComponent,
              @可选的() 私人的 可七星彩中奖查询的： 可七星彩中奖查询指令,
              私人的 消毒剂： DomSanitizer,
              私人的 主办： 元素引用) {
              
    如果 (!可搜寻的) {
      扔 新 错误(`失踪 [可搜寻的] 指示`);
    }
  }
 
  ngOnInit() {
    这个.容器.寄存器(这个, { 突出: 真正 });
  }
 
  ngOnDestroy() {
    这个.容器.取消注册(这个, { 突出: 真正 });
  }
 
  得到 代币() {
    返回 这个.可搜寻的.代币;
  }
 
  突出(代币: 串, 七星彩中奖查询词: 串) {
    这个.主办.nativeElement.在nerHTML = 这个.消毒剂.消毒(安全上下文.的HTML, 这个.解决(代币, 七星彩中奖查询词));
  }
 
  解决(代币: 串, 七星彩中奖查询词: 串) {
    ...已移除 对于 简洁, 您 能够 看到 它 在 的 充分 演示
  }
}

如前所述，该指令取决于 SearchableContainer and a 可七星彩中奖查询指令，所以我们’重新要求Angular为我们提供两者。我们将它们标记为 可选的() 如果可以的话抛出一个错误’找不到其中一个，因为它们是 需要.

我们将实例注册到容器中，因此我们可以像使用 可七星彩中奖查询指令.

的 突出() 方法采用可七星彩中奖查询标记和当前七星彩中奖查询词并设置 在nerHTML 之后的宿主元素 sanitizing 出于安全原因。

的 解决()方法会传回以跨度包裹的匹配词，因此我们可以将CSS样式套用到它。

SearchableContainer  Changes

SearchableContainer
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
@零件({
  选择器: “可七星彩中奖查询的容器”,
  模板: `
    <ng-内容></ng-内容>
  `
})
出口 类 SearchableContainerComponent {
  私人的 可七星彩中奖查询的： 可七星彩中奖查询指令[] = [];
  私人的 可七星彩中奖查询的要点： SearchableHighlightDirective[] = [];
 
  ...
 
  七星彩中奖查询(七星彩中奖查询词: 串) {
    这个.handleSearchables(七星彩中奖查询词);
    这个.handleHighlighters(七星彩中奖查询词);
  }
 
  寄存器(可搜寻的, { 突出 }) {
    //添加实例
  }
 
  取消注册(可搜寻的, { 突出 }) {
    //删除实例
  }
 
  ngAfterContentInit() {
    这个.七星彩中奖查询(这个.术语);
  }
 
  私人的 比赛(可搜寻的: 可七星彩中奖查询指令) {
    返回 可搜寻的.代币.降低大小写().指数(这个._术语.降低大小写()) > -1;
  }
 
  私人的 handleSearchables(七星彩中奖查询词: 串) {
    ..相同
  }
 
  私人的 handleHighlighters(七星彩中奖查询词: 串) {
    对于 (const 可搜寻的Highlight 的 这个.可七星彩中奖查询内容) {
      可搜寻的Highlight.突出(可搜寻的Highlight.代币, 七星彩中奖查询词);
    }
  }
}

We’ve添加了一个数组来存储 SearchableHighlight 指令。当我们收到新的七星彩中奖查询字词时，我们将其循环并调用 突出() 传递令牌和七星彩中奖查询词的方法。

公开结果计数

让’最后增加了查看结果计数的功能。首先，我们’将添加一个计数器到我们的 SearchableContainer component:

结果计数
的JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@零件({...})
出口 类 SearchableContainerComponent {
 
  私人的 _计数 = 0;
  得到 计数() {
    返回 这个._计数;
  }
 
  组 计数(计数: 数) {
    这个._计数 = 计数;
  }
  
  ...
 
  私人的 handleSearchables(七星彩中奖查询词: 串) {
    让 计数 = 0;
    对于 (const 可搜寻的 的 这个.可七星彩中奖查询的) {
      如果 (!七星彩中奖查询词) {
        可搜寻的.显示();
        计数++ ;
      } 其他 {
        如果 (这个.比赛(可搜寻的)) {
          可搜寻的.显示();
          计数++ ;
        } 其他 {
          可搜寻的.隐藏();
        }
      }
    }
    这个.计数 = 计数;
  }
  
  ...
 
}

现在我们需要将其公开给视图。我们’将使用并非所有人都熟悉的Angular功能— 的 出口As feature.

我已经为此主题写过一篇专门的文章，但长话短说， 出口As 属性可让我们向模板公开指令公共API。

1
2
3
4
5
6
7
8
9
@零件({
  选择器: “可七星彩中奖查询的容器”,
  模板: `
    <ng-内容></ng-内容>
  `,
  出口As: “ 可搜寻的Container”,
  changeDetection: 变更检测策略.OnPush
})
出口 类 SearchableContainerComponent { ... }


现在我们可以访问 SearchableContainer 模板中的实例：

1
2
3
4
5
6
7
8
9
10
<可搜寻的-容器 [七星彩中奖查询词]=“ 七星彩中奖查询Control.value”
                      ＃容器=“ 可搜寻的Container”>
                      
  结果: {{容器.计数}}
  
  <ul>
   ...
  </ul>
  
</可搜寻的-容器>


We’重新创建一个名为容器的局部变量’s a reference to 的 SearchableContainer实例。目的是激发您在Angular中创建可七星彩中奖查询组件的基本思想。

源代码

任务给你

创建可七星彩中奖查询的容器
创建可七星彩中奖查询的容器

You have to 加 bootstrap badge 在 这个 可搜寻的 零件。 And 如果 您 want more 的n 如果 文章 is greater than 10 的n badge color should be green otherwise red.

在评论部分与我们分享您的代码链接。

您认为，您可以接受这一挑战吗？

1+
概要
在Angular中创建自己的可七星彩中奖查询组件
文章名
如何在Angular中创建自己的可七星彩中奖查询组件？
描述
在上一篇文章中，我在Angular中实现了一个七星彩中奖查询过滤器管道。而且我很想知道如何在Angular中创建自己的可七星彩中奖查询组件。
作者
达斯
发布者名称
达斯
出版商徽标
达斯