标签: angular2-styleguide

在我知道更好之前,我曾经将我的指令定义为:

...
inputs: [
  'onOutside'
]
... 

export class ClickOutsideDirective {
  @Output() onOutside: EventEmitter<any> = new EventEmitter();
}

但后来我读了样式指南,它说你不应该在输出前加上,on因为Angular 2支持on-模板中的语法.

所以我试图将其改为:

@Input() outsideClick: any;
@Output() outsideClick: EventEmitter<any> = new EventEmitter();

但是,如果不允许使用前缀,我发现很难将@Input名称与Output名称分开on.

在你可以命名@Input和@Output同一个东西之前,如果在导出的类中声明两者,那么这将不再有效,因为将抛出错误.

如果我将@Inputto outside和@Outputto 命名为outsideClick,那它就没有意义,因为它们都是同一个东西.outside是我想在调用时执行的函数outsideClick.

而且,outsideClick如果outside不再是同名的话,也不会知道要执行什么,或者我错过了什么？

我应该如何在这里命名@Input和@Output变量,以便它仍然有效,并且与第一个例子中的一样有意义？

编辑:

用法示例:

<div clickOutside [exceptions]="['.toggler']" (outside)="doSomethingOnOutsideClick()"></div> 

我正在学习Angular 2,我想知道是否可以通过使用组件选择器来应用css样式:

组件

@Component({
    selector: 'app',
    styleUrl: './local.css',
    templateUrl: './app.html',
})
export class AppComponent { }  

风格

app {
    width: 10px;
    height: 100px;
    background-color: red;
}

假设它是可能的,这是最好的方法吗？