标签: 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 材料表组件。我不需要桌子。我只是想学点新东西。

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

我想创建一个结构指令，其行为如下：

<p *myDirective="condition">This is some text</p>

• 如果condition是false，则该<p>标签根本不会呈现。
• 如果condition是true，则该<p>标签将使用额外的class属性进行呈现。

因此，要么没有渲染任何内容，要么：

<p class="my-added-class">This is some text</p>

换句话说，它有点像*ngIf，但有额外的行为。

我可以找到如何执行包含/排除行为的示例（实际上Angular 文档中有这样的示例）。我还可以找到如何使用Renderer2API将类添加到元素的示例。

但是，我不知道如何组合这些技术，因为第一个方法操纵 来viewContainer创建嵌入视图，而第二个方法使用渲染器来操纵元素。

有没有办法做到这一点？我可以以某种方式创建嵌入视图，然后操作它创建的元素吗？或者我可以操纵模板来更改视图的呈现方式吗？

[注意：@HostBinding不适用于结构指令，因此这不是一个选项]

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

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 创建了库，结果是相同的。

亲切的问候

肖恩

我有获取用户输入的字段，根据它，下面的元素将显示已写入的内容

 <label>message</label>
 <input type="text" name="name" [(ngModel)]="person.message"class="form-control">

 <label class="label">you've written this </label>
 <input type="text" name="name" disabled value="{{message}}" class="form-control">

这段代码工作正常，但我想为显示的值分配一个条件，如下所示： *ngIf=person.message!=null?{{message}}":'write'

这意味着如果输入字段不为空，则显示写入的内容，否则显示单词 write

我有一个带有 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> …