标签: angular

我有一个父组件:

<parent></parent>

我想用子组件填充这个组:

<parent>
  <child></child>
  <child></child>
  <child></child>
</parent>

父模板:

<div class="parent">
  <!-- Children goes here -->
  <ng-content></ng-content>
</div>

儿童模板:

<div class="child">Test</div>

由于parent和child是两个单独的组件,他们的风格被锁定在他们自己的范围.

在我的父组件中,我尝试过:

.parent .child {
  // Styles for child
}

但.child样式没有应用于child组件.

我尝试使用styleUrls将parent样式表包含在child组件中以解决范围问题:

// child.component.ts
styleUrls: [
  './parent.component.css',
  './child.component.css',
]

但这并没有帮助,也尝试了另一种方式,即取出child样式表,parent但这也无济于事.

那么如何设置包含在父组件中的子组件的样式？

在Angular 2中阻止鼠标事件传播的最简单方法是什么？我应该传递特殊$event物体并给stopPropagation()自己打电话还是有别的办法.例如在Meteor中我可以简单地false从事件处理程序返回.

我试图按照https://material.angular.io/components/component/dialog上的文档但我不明白为什么它有以下问题？

我在我的组件上添加了以下内容:

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

在我的模块中,我补充道

import { HomeComponent,DialogResultExampleDialog } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog
  ],

// ...

但我得到这个错误....

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:50
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next …

有没有相当于$scope.emit()或$scope.broadcast()在角？

我知道EventEmitter功能,但据我所知,它只会向父HTML元素发出一个事件.

如果我需要在fx之间进行通信怎么办？兄弟姐妹或DOM根目录中的一个组件和一个嵌套了几层深层的元素？

在Angular Component Router文档中,我偶然发现了一个我从未见过的npm命令,我不明白发生了什么:

npm install @angular/router --save

是什么意思@angular/router？

整个字符串是包名吗？但是当我在npmjs.com上使用搜索时,我找不到那个包.并且命令行搜索确实没有返回这样的包:

npm search @angular/router
:No match found for "@angular/router"

那么@angular/npm中的某种前缀机制呢？它是如何工作的？

如果答案是可接受的答案,我试图显示一个复选标记:

template: `<div ngIf="answer.accepted">&#10004;</div>`

但我得到这个错误:

EXCEPTION: No provider for TemplateRef! (NgIf ->TemplateRef)

我究竟做错了什么？

在我的一个Angular 2路线的模板(FirstComponent)中,我有一个按钮

first.component.html

<div class="button" click="routeWithData()">Pass data and route</div>

我的目标是实现:

按钮单击 - >路由到另一个组件,同时保留数据,而不使用其他组件作为指令.

这就是我试过的......

第一种方法

在同一视图中,我存储基于用户交互收集相同的数据.

first.component.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

一般情况下我路由SecondComponent通过

 this._router.navigate(['SecondComponent']);

最终传递数据

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

而带参数的链接的定义是

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', …

在一个Angular应用程序中,我看到它@Component有属性moduleId.这是什么意思？

当module.id没有在任何地方定义时,该应用仍然有效.它怎么还能运作？

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

我正在使用带有TypeScript(版本1.6)的Angular(版本2),当我编译代码时,我得到以下错误:

Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/change_detection/parser/locals.d.ts(4,42): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(1,25): Error TS2304: Cannot find name 'MapConstructor'.
    node_modules/angular2/src/core/facade/collection.d.ts(2,25): Error TS2304: Cannot find name 'SetConstructor'.
    node_modules/angular2/src/core/facade/collection.d.ts(4,27): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(4,39): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(7,9): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(8,30): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(11,43): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(12,27): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(14,23): Error TS2304: Cannot find name 'Map'.
    node_modules/angular2/src/core/facade/collection.d.ts(15,25): Error TS2304: …

我们想在使用angular-cli 1.0.0-beta.5(w/node v6.1.0)生成的应用程序中使用bootstrap 4(4.0.0-alpha.2).

在使用npm获取引导程序及其依赖项后,我们的第一种方法是将它们添加到angular-cli-build.js:

  'bootstrap/dist/**/*.min.+(js|css)',  
  'jquery/dist/jquery.min.+(js|map)',  
  'tether/dist/**/*.min.+(js|css)',

并将它们导入我们的 index.html

  <script src="vendor/jquery/dist/jquery.min.js"></script>
  <script src="vendor/tether/dist/js/tether.min.js"></script>
  <link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
  <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>

这很好用,ng serve但是一旦我们生成了带有-prod标志的构建,所有这些依赖关系都消失了dist/vendor(惊喜!).

我们打算如何在使用angular-cli生成的项目中处理这种情况(即加载引导程序脚本)？

我们有以下想法,但我们真的不知道要走哪条路......

• 使用CDN？但我们宁愿提供这些文件以保证它们可用

• 复制依赖关系到dist/vendor我们之后ng build -prod？但这似乎是angular-cli应该提供的东西,因为它"照顾"构建部分？

• 在src/system-config.ts中添加jquery,bootstrap和tether,并以某种方式将它们拉入main.ts中的bundle中？但考虑到我们不打算在我们的应用程序代码中明确使用它们(例如,不像moment.js或像lodash这样的东西),这似乎是错误的