标签: angular-components

我是Angular2的新手,我有兴趣了解是否有可能在另一个应用程序中的一个应用程序中重用整套演示组件？

例如,我有一个名为MyApp的Angular 2应用程序,在这里我有一些我创建的常见组件,它们位于app/components/common文件夹中,每个组件都包含一个TypeScript,Sass和HTML文件.

我使用Gulp将TypeScript编译为JS,将Sass编译为CSS.

我现在发布这些常见组件可以在我的其他Angular 2应用程序中使用,因此我想在一个名为MyOtherApp的单独Angular 2应用程序中使用它们.

我希望能够从MyApp中提取所有常用组件,并能够在MyOtherApp中使用它们.

这可能吗？如果是这样,这种共同组件的最佳方法是什么？

正如我所说,我正在使用Gulp进行构建/运行,还有System.js用于Angular应用程序的配置设置.

如果需要,我可以分享一些我尝试过的代码,但我不确定分享的内容是什么,所以请求可能有用的内容,我会分享.

上下文

我正在为复选框编写自定义Angular组件.该组件呈现复选框标记以及标签标记.复选框的"id"属性和标签的"for"属性都设置为组件的id属性(组件的属性@Input),以确保单击标签将切换复选框.该模板的简化版本如下所示:

<div class="checkbox">
    <input type="checkbox" [id]="id" />
    <label [for]="id"><ng-content></ng-content></label>
</div>

问题

当我在我的组件(例如<my-checkbox id="hello">Check me</my-checkbox>)上设置"id"prop时,会在DOM中的组件包装器标签上自动设置"id"属性.这导致DOM中出现重复的ID,因为我已经在组件内的复选框上设置了"id"属性.这是无效的,并且会破坏浏览器的默认切换点击标签行为.DOM输出是:

<my-checkbox id=“my-checkbox” ng-reflect-id=“my-checkbox” ng-reflect-checked="true">
    <div ng-reflect-ng-class="[object Object]" class="checkbox">
        <input class="checkbox__element" type="checkbox" name="fire_missiles" ng-reflect-id=“my-checkbox” id=“my-checkbox” value=“fire_missiles” ng-reflect-checked="true">
        <label class="checkbox__label" ng-reflect-html-for=“my-checkbox” for=“my-checkbox”>
            Fire missiles?
        </label>
    </div>
</my-checkbox>

有没有办法要么a)摆脱垃圾容器标签或b)停止自动反映"id"道具作为属性？

注意:使用应用于div之类的属性选择器没有帮助,它只是将额外的"id"从<my-checkbox />div 移动到div.

在WebStorm中使用scss和:: ng-deep的Angular 2+突出显示此选择器,文本为"Unknown pseudo selector'ng-deep'"

我尝试过类似的东西:

selector-pseudo-class-no-unknown: true
  ignorePseudoClasses: ng-deep

or

selector-pseudo-class-no-unknown: false

这些都不起作用.

如何在scss-lint.yml中为这个伪选择器设置异常？

我正在编写一个Angular 4组件的测试,它是一个登录表单.可以通过单击"提交"按钮或在任何输入字段中输入来提交表单.此行为由Angular表单指令决定.

我可以编写一个测试用例来验证按钮单击提交表单,但是我无法通过按键事件触发提交行为.

模板:

<form (ngSubmit)="onLoginSubmit()" #loginForm="ngForm">
<div class="form-group">
    <label for="userid">User ID</label>
    <input type="text" class="form-control" name="userid" id="userid" required
        [(ngModel)]="model.userId" #userid="ngModel">
    <div [hidden]="userid.valid || userid.untouched" class="alert alert-danger">
        User ID is required
    </div>
</div>
<div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" name="password" id="password" required
        [(ngModel)]="model.password" #password="ngModel">
    <div [hidden]="password.valid || password.untouched" class="alert alert-danger">
        Password is required
    </div>
</div>
<button type="submit" class="btn btn-success" [disabled]="loginForm.form.invalid">Submit</button>    

规格:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement, Component, ViewChild } …

子组件TS

import { Component, OnInit, Input, Output } from '@angular/core';
import { EventEmitter } from 'events';

export class ChildComponent implements OnInit {
    @Output() OpenScheduleCall = new EventEmitter<boolean>();

    onLog() {
          this.OpenScheduleCall.emit(false);
    }
}

父组件HTML:

<div [(hidden)]="OpenScheduleCall">
// content
</div>
<app-schedule-call *ngIf="!!OpenScheduleCall" [prospectid]='prospectid'  [(OpenScheduleCall)]="OpenScheduleCall"></app-schedule-call>

我正在设置子组件中的值,但更改不会反映在父组件中

我有一个实现的Angular组件ControlValueAccessor,但从writeValue不使用初始值调用该方法ngModel.

模板:

<my-comp [(ngModel)]="$ctrl.activeUser"></my-comp>

该组件通过以下方式降级为AngularJS:

.directive('myComp', downgradeComponent({
  component: MyComp,
  inputs: [],
  outputs: [],
}));

我尝试添加ngModel至inputs和outputs,但它不工作.

我已经在我的一个组件文件中创建了一个函数，该函数可以重置form（myform）：

`onSubmit() {
  if (this.myform.valid) {
    console.log("Form Submitted!");
    this.myform.reset();
  }
}`

重设整个表单效果非常好，但是可以重设一些元素并保持其他相同的方式。

我有一个父组件，我想在其中创建和存储我的反应式表单。表单数组中将有多个表单组实例。我想将表单控件从每个表单组传递给子组件，但是在弄清楚如何做到这一点时遇到了麻烦。

这是一个Stackblitz，演示了我想做的事。另外，某些字段仅适用于汽车的某些“品牌”，这就是为什么我的html中包含以下行：

<input type="text" *ngIf="car.make != 'ford'" formControlName="model">

我想将“详细信息”表单组字段移到“详细信息字段”子组件中，但是当我尝试这样做时，它告诉我我没有表单组实例，所以我知道父表单组是未在子组件中注册。任何帮助深表感谢。

我们正在开发一个企业组件库,它应该提供Material Designed Angular Components.所以这个库的用户不应该直接使用例如Angular Material,而是包括一些像" custom-tabs " 这样的组件.

使用MatTabModule的组件直接像魅力一样工作,而在使用我们的自定义组件时,投影内容不会显示.

用法看起来与Angular Material API非常相似:

<custom-tabs>
  <custom-tab [label]="labelA">Content A</custom-tab>
  <custom-tab [label]="labelB">Content B</custom-tab>
  <custom-tab [label]="labelC">Content C</custom-tab>
</custom-tabs>

自定义组件尝试按如下方式投影内容:

<!-- custom-tabs template -->
<mat-tab-group>
  <ng-content></ng-content>
</mat-tab-group>

<!-- custom-tab template -->
<mat-tab [label]="label">
  <ng-content></ng-content>
</mat-tab>

有谁知道我们如何让它运作？

我提供了一个StackBlitz,您可以在其中查看问题.

我正在尝试开发一个新的库，打算将其放入三个新的 Angular 应用程序中，以及几个扩展来自该库的组件的组件，然后由这三个应用程序使用。在我看来，自然结构是每个应用程序、库和每个组件都有一个单独的存储库。

my-lib.git
app1.git
app2.git
component1.git
component2.git

然而，到目前为止我看到的每一篇文章都是从创建工作区并在其中构建库开始的。由于每个组件都将在自己的时间线上开发和分发（通过私有 Gitlab，而不是 npm），应用程序开发人员会选择要包含哪些组件的版本，因此我觉得将它们全部放入一个存储库中是不对的。

为此我应该使用什么存储库结构以及如何开发 Angular 库而不将它们全部放入工作区？