标签: angular-components

我正在我的 AppModule 中导出一个自定义组件，但不能在另一个模块中使用它，该模块正在 AppModule 中导入。我认为导出的组件是全局可见的？

我正在尝试在 TestModule 的组件中使用带有选择器“app-calendar”的 CalendarComponent。

app.module.ts

@NgModule({
  declarations: [ ... ,
    CalendarComponent,
  ],
  imports: [ ... ,
    TestModule,
  ],
  exports: [ ...
    CalendarComponent,
  ],
  providers: [ ... ],
  bootstrap: [AppComponent]
})

测试模块.ts

@NgModule({
  declarations: [ ... ,
    TestComponent
  ],
  imports: [ ... ],
  exports: [ ... ],
  providers: [ ... ]
})

测试组件.html

<app-calendar></app-calendar>

控制台抛出“app-calendar”不是已知元素（不是模块的一部分）的错误

我错过了什么？

我有一个使用MatInputAngular Material的模板。我试图从代码中访问这个组件，@ViewChild以便我可以以编程方式改变focused状态，但是MatInput当视图初始化时它不存在 - 它的存在是由*ngIf指令确定的。基本上，当视图加载时，有一个p带有一些文本的元素。如果用户单击该元素，它将被替换input为起始值是原始元素文本的 。当它失去焦点时，它会被保存并恢复为一个p元素。问题是当他们第一次单击文本进行更改时，input创建的文本没有焦点 - 他们必须再次单击它才能开始编辑。我希望他们能够单击一次并开始输入。

这是我的相关代码。

模板：

<mat-form-field *ngIf="selected; else staticText" class="full-width">
  <input matInput type="text" [(ngModel)]="text" (blur)="save()">
</mat-form-field>
<ng-template #staticText>
  <p class="selectable" (click)="select()">{{ text }}</p>
</ng-template>

打字稿：

import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { MatInput } from '@angular/material';
import { AfterViewInit } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-click-to-input',
  templateUrl: './click-to-input.component.html',
  styleUrls: ['./click-to-input.component.scss']
})
export class ClickToInputComponent …

有人可以解释 angular 5 中延迟加载模块和动态组件加载之间的区别吗？我很难弄清楚何时使用什么。您能否为每个用例提供一个用例，以便我更好地理解它们？我对 angular 5 还很陌生……我知道延迟加载是关于模块的，而动态组件加载是关于组件的。

我是 Angular 的新手，刚刚开始学习。我有一种情况，我喜欢在多个项目中使用相同的组件。

比方说，我有一个CustomerComponent，它执行 CRUD 操作。

现在我想CustomerComponent在项目A和项目B中使用。原因是如果我必须修改. CustomerComponent，我只能在一个地方修改而不是多个项目。

是否可以创建这样的组件？

如果可能，请指导我如何完成这一任务。

提前致谢。

我只想在单击子组件中的按钮时更新父组件中的布尔值。我有一个基于动态 ngClass 隐藏和显示的滑出式子组件。该类是根据父级的布尔值设置的。但是，当我从子项中的按钮关闭该组件时，我想更新父项中的布尔值：

父组件打字稿：

export class AppComponent implements OnInit   {

  showFlyout: boolean

  constructor() {}

  ngOnInit() {
    this.showFlyout = false;
  }
}

和父 html：

<main>

  <button (click)="showFlyout = !showFlyout"><i class="fa fa-check"></i>Show Flyout</button>

  {{showFlyout}}

  <app-child id="flyout" [ngClass]="showFlyout ? 'active' : ''"></app-child>

</main>

子组件打字稿：

export class ActivateFlyoutComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  closeActivationFlyout() {
    const flyout = document.getElementById('flyout');
    flyout.classList.remove('active');
  }

}

和子组件html：

<button (click)="closeFlyout()">Close</button>

这是一个Stackblitz。您可以看到单击父按钮正确切换类，但是如何从子组件中的单击更新该布尔值，从而使子组件中的 closeActivationFlyout() 方法变得不必要？

在我的项目中，我需要在 2 个不同的屏幕中显示 2 个不同的组件。所以我打开两个浏览器窗口并显示这些组件。我想知道是否可以从第一个窗口中的组件交互到第二个窗口中的另一个组件？

我尝试Subject在服务中创建一个。但是每当我尝试在另一个窗口的组件中订阅此主题时，它都不起作用。这是我所做的：

export class MyService {
  public navigationTrigger: Subject<NavigationParams> = new Subject();

  constructor(private _http: Http) {
    this.navigationTrigger.next(params);
  }
}

在我订阅的一个组件中：

this.watsonService.navigationTrigger.subscribe((navigation) => {
   this.updateNavigation(navigation);
});

但不起作用。我不确定如何实现我所需要的。

在.angular-cli.json，我得到了一些全局样式：

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
        "styles.scss"
    ],

但我不希望它们中的任何一个应用于特定组件 - 可以实现吗？

编辑 1：
不幸的是，覆盖组件样式中的 CSS 样式将不起作用，因为组件模板中的 HTML 是从 Web API 后端获取的 - 我想我无法真正覆盖每个可能的类/选择器？

在我的 Angular 应用程序中，我通过实现ControlValueAccessor接口创建了一个自定义表单元素。

因此，在我的组件中，我正确实现了该接口的所有方法，包括setDisabledState：

/**
 * This function is called when the control status changes to or from "disabled".
 * Depending on the value, it will enable or disable the appropriate DOM element.
 *
 * @param isDisabled
 */
setDisabledState(isDisabled: boolean): void {
  this.disabled = isDisabled;
}

一切正常。

问题是当我将组件的ChangeDetectionStrategy更改为OnPush.

通过这样做，我的组件的启用/禁用功能被破坏了。

我有一个用三个项目创建的 Angular 工作区。以及我刚刚创建了一个库，我希望在其中包含可重用的模块。

通常对于项目（应用程序和库），我运行以下命令来生成模块或组件：

ng g c component componentName --project=UserPortal

ng g c component componentName --project=myLibrary

但是现在我需要向其中的模块添加组件：

例如库： projects myLibrary src lib navigation-module Add Component here

对于应用项目模块： projects UserPortal src app userModule Add Component Here

我能够通过运行在工作区的库项目中创建一个模块：

ng generate module navigation-module --project=myLibrary

目前我必须通过命令行进入该目录才能创建一个组件。但我有一种感觉，我可以像所有其他命令一样从工作区执行此操作。这将是最有益的，而不必在目录之间进行命令行排列或来回切换。

快速概览：

1. 在 Angular 工作区中创建一个库
2. 在 Angular 工作区的库中创建了一个模块
3. 想要从工作区的库中的模块内创建一个组件

我已经构建了一个对话框服务，它动态地创建了一个带有子组件的 DialogComponent。

我希望我的 DialogComponent 是一个泛型类，<T>因为我希望为我正在使用的任何组件子项输入。我目前正在使用这些行创建我的 DialogComponent ->

const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DialogComponent);
const componentRef = componentFactory.create(new DialogInjector(this.injector, map));

问题是 resolveComponentFactory 实际上返回的是一个DialogComponent<{}>而不是T。我确实尝试过投射，但似乎我不能，因为缺少某些方法。

我想知道我怎么能做到这一点！

谢谢。

编辑

this.componentFactoryResolver.resolveComponentFactory<DialogComponent<T>> 做的伎俩..