标签: angular-components

在 AngularJS 中我们可以广播并监听事件：

$rootScope.$emit('myEvent',$scope.data);

$rootScope.$on('myEvent', function(event, data) {}

有什么方法可以监听组件内部的事件吗？

我想要实现的是对表单内重复的一组组件执行一些操作。当然，NG-repeat 会迭代某些模型。模型中的一些数据绑定到组件。将函数绑定到组件很容易，因此组件可以执行一些逻辑，但相反的方向似乎并不那么容易。

<div ng-repeat="someObject in mainModel.listOfObjects">
   <someControl ng-model="someObject.foo"></someControl>
   <custom-component ng-model="someObject.bar"></custom-component>
</div>
<someButton ng-click="executeActionOnAllCustomComponents()">

我有 Angular 2 组件包含 jquery 组件，我想为我的 Angular 2 组件的每个实例生成 id， 因为我需要为每个组件使用不同的 jquery 选择器

这是我的组件

@Component({
  selector: 'full-calendar',
  templateUrl: 'full-calendar.html'
})
export class FullCalendarComponent {

ngOnChanges(changes: any) {
 
    $('angular2-fullcalendar').fullCalendar('option',changes.options.currentValue)
 
    }
  
}

我想每次使用多个不同的选择器

我找到了这个解决方案

export class GetId {
  protected getId(id: number|string = _.uniqueId()): string {
    return _.lowerFirst(this.constructor.name) + '_' + id;
  }
}

class MyComponent extends GetId {
  ...    
}

和 id 可以这样使用

<input [id]="getId('name')" type="text">

但我仍在寻找内置解决方案。

我有一个使用自定义组件作为输入的表单，它接收 ControlName。当我在组件中键入内容时，它不会更新“错误”属性。

应用程序-pf-input-text.ts：

import { Component, OnInit, Input } from \'@angular/core\';\n\n@Component({\n  selector: \'app-pf-input-text\',\n  templateUrl: \'./pf-input-text.component.html\',\n  styleUrls: [\'./pf-input-text.component.scss\']\n})\nexport class PfInputTextComponent implements OnInit {\n\n  @Input() id: string;\n  @Input() name: string;\n  @Input() value: string;\n  @Input() placeholder: string;\n\n  //falta trim\n\n  @Input() maxlength: string;\n  @Input() minlength: string;\n\n  @Input() disabled: boolean;\n  @Input() required: boolean;\n\n  constructor() { }\n\n  ngOnInit() {\n  }\n}\n

app-pf-input-text.html：

<div class="input-group">\n  <input \n      type="text" class="form-control">\n</div>\n

我的表格：

import { Component, OnInit, Input } from \'@angular/core\';\n\nimport { FormArray, FormBuilder, FormGroup, …

我在另一个父应用程序的子目录中有一个 Angular 5 应用程序。

父应用程序是一组JSP，以及其他AngularJs应用程序...等等。

我想做的是将父应用程序中的 CSS 文件包含到 Angular 5 应用程序的组件中。

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: [....] //Here
})

是否可以 ？

我查看了这个问题：Load external css style into Angular 2 Component 已经问过，但它与我的情况不符。

感谢您的帮助

我们有主要的大型应用程序，并将使用不同的库（Angular、React 等）创建单独的小型应用程序（微服务），并将它们编译成 Web 组件以便在任何地方使用它们。主应用程序有一些库（例如 underscore.js），我们的一些组件使用相同的库（例如 lodash.js），在这种情况下，我们在主应用程序中使用 Web 组件时会看到很多冲突。您对如何隔离 Web 组件库以及它们可以在隔离模式下工作有什么想法吗？我们也使用了 ShadowDOM，但没有成功。

我有两个链接：

1. ['/productlist',1000]
2. ['/productlist',1001]

这两个链接位于同一页面上。如果我第一次点击任何链接。它正在重定向到该页面，但如果我单击其他链接，它就不起作用。

组件.html代码

<a class="dropdown-item" (click)="GetProductList(subitem.SubCategoryID)">
 <i class="mdi mdi-chevron-right" aria-hidden="true"></i> 
 {{ subitem.SubCategoryName}}
</a> 

GetProductList(SubCategoryID){ 
    this.router.navigate(['/productlist',SubCategoryID]); 
}

我创建了一个库，它将CKEditor 5包装到一个 Angular Form Control 中，并将这个库作为npmjs 上的一个包提供。

当我构建 Angular 应用程序时，使用 ng build 将包与其模块一起导入，一切正常。

如果我为生产构建应用程序，似乎缺少任何依赖项，因为我想使用的组件不起作用。

构建库后 package.json 如下所示：

{
    "name": "ckeditor-form-controls",
    "version": "0.0.4",
    "peerDependencies": {
        "@angular/common": "^7.0.0",
        "@angular/core": "^7.0.0",
        "@ckeditor/ckeditor5-angular": "^1.0.1",
        "@ckeditor/ckeditor5-build-classic": "^12.0.0",
        "@angular/forms": "^7.2.11"
    },
    "main": "bundles/ckeditor-form-controls.umd.js",
    "module": "fesm5/ckeditor-form-controls.js",
    "es2015": "fesm2015/ckeditor-form-controls.js",
    "esm5": "esm5/ckeditor-form-controls.js",
    "esm2015": "esm2015/ckeditor-form-controls.js",
    "fesm5": "fesm5/ckeditor-form-controls.js",
    "fesm2015": "fesm2015/ckeditor-form-controls.js",
    "typings": "ckeditor-form-controls.d.ts",
    "metadata": "ckeditor-form-controls.metadata.json",
    "sideEffects": false,
    "dependencies": {
        "tslib": "^1.9.0"
    }
}

我得到的错误如下：

main.962748ac39bd9e0b2a2a.js:1 TypeError: Cannot read property 'childCount' of undefined
at main.962748ac39bd9e0b2a2a.js:1
at Yl (main.962748ac39bd9e0b2a2a.js:1)
at …

我一直在阅读文档，但似乎仍然对何时应该使用指令或组件感到困惑......

另外，什么时候最好抽象组件并将它们放入模块中？

我有一个应用程序需要水平滚动许多不同类型的列表。这是一个音乐应用程序，所以我可以水平滚动专辑图像、特色图像等。我生成了一些 html，为专辑项目列表创建水平滚动，如下所示：

<div class="hs-grid">
  <div class="hs full"">
      <app-album-item *ngFor="let releaseEl of releases" [submission]="releaseEl"></app-album-item>
  </div>
</div>

这会创建这样的东西：

我的问题是，如何将网格 html 转换为组件，这样我就不必为每种不同类型的水平滚动项重复网格代码。本质上是这样的：

<app-horizontal-scroll-grid>
    <app-album-item *ngFor="let releaseEl of releases" [submission]="releaseEl"></app-album-item>
    <!-- IT CAN ALSO BE FEATURED ITEMS -->
    <app-featured-item *ngFor="let featuredItem of featured" [featuredItem]="featuredItem"></app-featured-item>
</app-horizontal-scroll-grid>

显然这是行不通的...

我应该如何传递要在内部使用的项目列表，horizontal-grid-component因为它可以是不同类型的组件，例如：

• app-album-item
• app-featured-item
• ETC？

我知道，如果我只有一种类型的组件需要水平滚动，我可以将其放置在组件 HTMLapp-album-item内部horizontal-scroll-grid并将项目列表传递到@Input()，但由于组件的类型发生了变化，我有点困惑！

感谢您的任何帮助/见解！

仅当某些内容为真时，我才尝试将类应用于组件标记。

我如何将该主机转变为条件主机，以便我在需要时应用所需的类？

@Component({
  selector: 'k-sidebar',
  host: {
   class: '{{isChanged}}'
 },
 templateUrl: './ng-k-side-bar.component.html',
 encapsulation: ViewEncapsulation.None

})