标签: angular-directive

我在 Angular5 应用程序中到处使用 Angular-Material 库，但我不希望在我的标记中使用它的指令/组件/类名称，我更喜欢与外部库保持不可知的关系。但是，我尝试做这样的事情：

import { Directive, 
         ElementRef, 
         Renderer, 
         Renderer2 }  from "@angular/core";

import { MatButton }  from "@angular/material";
import { OnInit }     from "@angular/core";
import { Platform}    from "@angular/cdk/platform";
import {FocusMonitor} from "@angular/cdk/a11y";

@Directive({
  selector: '[my-button]'
})
export class MyButtonDirective extends MatButton {

  ngOnInit(): void {

  }

  constructor(renderer: Renderer2, elementRef: ElementRef, _platform: Platform, _focusMonitor: FocusMonitor) {
    super(renderer, elementRef, _platform, _focusMonitor);

  }
}

但是当我应用该my-button属性时，它似乎没有任何效果。即使console.logs从指令内部构造函数/onInit 也不会被打印。我不太确定我做错了什么，因为我以前从未在 Angular 中使用过指令。

如何使用组件作为 Angular 中另一个组件的输入数据？

例如：

我想要构建表格组件AppTableComponent：

<app-table [dataSource]="dataSource" [columns]="columns">\n  <ng-container tableColumnDef="actions">\n    <a routerLink="/model/edit/{{item.id}}" routerLinkActive="active">Edit</a>\n    <a routerLink="/model/delete/{{item.id}}" routerLinkActive="active">Delete</a>\n  </ng-container>\n  <ng-container tableColumnDef="isActive">\n    <div [ngClass]="{cercl:true, \'is-active\':item.is_active}">&nbsp;</div>\n  </ng-container>\n</app-table>\n

dataSource是数据数组之和，如Model[]orPerson[]或Car[]。columns是一个字符串数组，如[\'id\', \'isActive\', \'name\', \'actions\']. 它应该包含数据源行属性名称或附加列名称。

我知道如何使用ng-content，但它不是相同的情况。不同之处在于我应该在多个地方使用部分内容。也许我应该使用 ng-contet，但我不知道\xe2\x80\x99t 是什么。

我确信我的目标是可能的，因为 Angular 材质表的工作原理如下：

<mat-table #table [dataSource]="dataSource">\n    <ng-container matColumnDef="position"></ng-container>\n    <ng-container matColumnDef="weight"></ng-container>\n</mat-table>\n

请不要建议我使用 Angular 材料表组件。我不需要桌子。我只是想学点新东西。

我将非常感谢有关该主题的任何信息或文章！

是否可以以编程方式将指令添加到具有给定类名的组件中的所有元素，可能使用

document.getElementsByClassName("btn")

我想将matRipple指令添加到使用该类的所有元素btn，而不需要我们的团队手动将指令添加到每个元素。

或者我是否缺少另一种方法将 Angular Material 指令应用于给定类或标签名称的元素（例如button）

请注意，这适用于我们不想将它们全部切换到mat-buttons 的旧版应用程序。该指令工作正常，但我正在寻找一种让我们的开发人员更轻松的方法。

Angular 中的结构指令和属性指令有什么区别

我知道围绕这个问题有无数的问题，我尝试了所有解决方案，但没有一个适合我的需要。尝试过指令，直接在我的组件中尝试过，但它一次都不起作用。

所以我的情况是这样的；我有一个表格视图，在每个表格视图的末尾，您可以通过单击图标打开一个小下拉列表。弹出的下拉菜单是一个小组件。所以在我的父组件中它看起来像这样；

<tbody>
    <tr *ngFor="let rows of subscriptionTable.data; let i = index;">
        <td *ngFor="let cell of subscriptionTable.data[i].data"> 
            <!-- Table actions -->
            <div *ngIf="cell.actions && cell.actions.length > 0">
                <app-dropdown
                    [actions]         = cell.actions
                    (onActionClicked) = "handleSubscriptionAction($event, i)"
                >
                </app-dropdown>
            </div>
        </td>
    </tr>
</tbody>

所以我正在渲染多个子应用程序下拉组件，如下所示；

<div class="fs-action">
  <div class="fs-action__dots" (click)="openActionSheet($event)">
    <span class="fs-action__dot"></span>
    <span class="fs-action__dot"></span>
    <span class="fs-action__dot"></span>
  </div>

  <ul class="fs-action__list">
    <li 
      class="fs-action__item"
      *ngFor="let action of actions; let i = index;" 
      (click)="actionClicked( $event, i )" 
      [ngClass]="{'fs-action__item--danger': action.type === 'destructive' }"
    >
        {{ action.label }}
    </li> …

我使用以下方法创建了一个 Angular 库：

1. ng 新的 my-workspace --create-application=false
2. cd 我的工作区
3. ng 生成库 my-lib

图书馆工作了。但是，当我修改模板以使用 *ngFor 时，如下所示：

模板：

<div *ngFor="let item of items">
  my-lib works!
</div>

我收到错误：

属性 ngFor 上没有匹配的指令

到目前为止，我发现的各种建议都没有成功。如果您知道如何将新的干净库配置为使用 *ngFor 等指令，我将非常感谢您的建议。我用 Angular 8 和 9 创建了库，结果是相同的。

亲切的问候

肖恩

我有一个带有 SVG 元素的组件，我试图将该 SVG 的各个部分分成不同的组件。嵌套组件需要从父组件动态创建，这是因为我正在从 json 文件构建整个 SVG 图形，该文件确定需要添加哪些嵌套组件（SVG 嵌套形状）。

为了动态创建组件，我使用 ComponentFactoryResolver 和 @angular/core 中的 ViewContainerRef

@Component({
selector: 'skick-player',
 templateUrl: './player.component.html',
 styleUrls: ['./player.component.scss'],
})
export class PlayerComponent implements OnInit, AfterViewInit {

@ViewChild('svgContainer', { read: ViewContainerRef }) container;

constructor( private resolver: ComponentFactoryResolver) {}

  performFrame() {

      ....
     //Add nested component
      const factory = this.resolver.resolveComponentFactory(
        BackDropItemComponent
      );
      const componentRef = this.container.createComponent(factory);
      componentRef.instance.imagePath = objectUrl;
    }
  }
});

}

问题是 Angular 将嵌套组件包裹在 div 中：

<div _nghost-qon-c42="" skick-back-drop-item="" class="ng-star-inserted">

因此，由于创建了特殊的元素标签，它不会被渲染。如果删除该 div 元素，它将正确渲染嵌套的 SVG。

我知道我可以将嵌套组件渲染为指令并且它会起作用，如下所示：

<svg> …

我认为指令的本地提供者是为其子内容提供服务，例如：

//template in a module 
<table>
   <tr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</table>

myPipe在其构造函数中具有依赖项MyService：

因此，如果我将指令定义为：

@Directive({
    selector: "[myAttr]", 
    providers: [MyService]
})
export class MyDirective { }

并将其应用为：

<table>
   <tr myAttr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</table>

那么MyServiceinmyPipe的构造函数就可以解决了。

但是，如果有一个组件也在MyService其本地提供程序中定义并将其应用为：

<myComponent>
   <tr myAttr>
      <td>{{ item.price | myPipe }}</td>    
   </tr>
</myComponent>

由于 和MyDirective都可以为MyComponent提供服务myPipe，那么会选择哪一个myPipe，本地提供商 MyDirective或MyComponent？