小编Par*_*ain的帖子

我正在尝试使用TypeScript启动基本的Angular 2(beta 2)应用程序.我有以下app.ts文件(从Angular的最新设置指南中复制)

import {Component, View, bootstrap} from 'angular2/angular2';
@Component({
    selector: 'app'
})
@View({
    template: `
        <div></div>
    `
})
class AppComponent {
    constructor() {}
}

bootstrap(AppComponent);

但是当我尝试编译它时,我得到了错误

错误TS2307:找不到模块'angular2/angular2'.

如果我改为使用在其他一些资源上找到的格式angular2/core而不是angular2/angular2像

import {Component, View, bootstrap} from 'angular2/core';

我收到错误

错误TS2305:模块'"node_modules/angular2/core"'没有导出成员'bootstrap'.

我应该怎么做才能导入所有这些？

在搜索时我发现了一些名为moduleId设置模板和CSS文件的相对路径的东西,但我moduleId不确切知道如何在我们的angular2组件中使用？

实际上,问题出在我的文件夹结构中.我从dist文件夹加载我的所有.js文件,而我的视图(.html文件)在src文件夹中.所以当我使用moduleId: module.id像这样的角度从dist文件夹,而不是src文件夹采取路径.

所以这里有人帮我告诉我如何为我的组件angualr2设置自定义moduleId？

我的文件夹结构是这样的.

                                  App
                                  /\
                                 /  \
             (.js + .map files)Dist    Src(.ts + .html + .css files)

• Folder Dist包含所有.map和.js文件
• 文件夹src包含所有.ts,.HTML和.css文件.

实际编码(工作) -

@Component({
    selector: 'class-timing',
    templateUrl: 'src/components/TimeTable/class-timing/class-timing.html',
    styleUrls: ['src/app.css']
})

修改编码(由于路径不正确而无法工作) -

@Component({
    selector: 'class-timing',
    templateUrl: 'class-timing.html',
    moduleId: module.id,
    styleUrls: ['src/app.css']
})

参考本教程 http://schwarty.com/2015/12/22/angular2-relative-paths-for-templateurl-and-styleurls/

我是Angular 2的新手,我想编写一个属性指令来查询搜索'class1'类的元素,如果找到它,那么它应该用'class2'替换'class1'.

应该是这样的:

import {Directive, ElementRef, Renderer, Input} from 'angular2/core';

@Directive({
  selector: '[my-directive]'
})
export class MyDirective {
  constructor(el: ElementRef, renderer: Renderer) {
    //Pseudo-code
    if (el.containsClass('class1')) {
      el.removeClass('class1');
      el.addClass('class2');
    } 
  }
}

无法找到任何相关文档,所以决定写这个问题.

我知道event Bindingangular2中的(更改),但我很惊讶为什么我的代码没有按预期工作？

我的代码在这里..

http://plnkr.co/edit/9pSWSeqBc5oaSAtsfwNY?p=preview

调用change事件时,两个条件都不按预期工作.

(change)="holiday= !holiday && employee= !employee"

当第一次调用change事件时它正常工作但第二次它只适用于第一个条件,即holiday.在我的例子中,我所期望的是值为true或false,但不是预期的值.

当然有一些错误.有没有人可以正确解释(change)事件的生命周期？

我一直在学习Angular 2的教程,一切顺利,直到我不得不将appcomponent拆分为heroescomponent和appcomponent.

这里的任何人有同样的问题或者可以看到问题吗？

app.component.ts

import { Component }       from 'angular2/core';
import { HeroService }     from './hero.service';
import { HeroesComponent } from './heroes.component';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from 'angular2/router';
import {DashboardComponent} from './dashboard.component';
import {HeroDetailComponent} from "./hero-detail.component";

@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <nav
            <a [routerLink]="['Dashboard']">Dashboard</a>
            <a [routerLink]="['Heroes']">Heroes</a>
        </nav>

        <router-outlet></router-outlet>
      `,

    styleUrls: ['app/app.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [
        ROUTER_PROVIDERS,
        HeroService
    ]
})

@RouteConfig([
    {
        path: '/heroes',
        name: 'Heroes',
        component: HeroesComponent
    },
    {
        path: '/dashboard',
        name: 'Dashboard',
        component: DashboardComponent,
        useAsDefault: true
    },
    { …

嗨我有一个受限制的textarea mymodel.每当您更改textarea中的值时,它都会自动更改模型.

我想要它做的只是在textarea而不是live上模糊更新模型,我该怎么做？

当textarea不在焦点时,我仍然希望模型更改更新textarea.

@Component({
    selector: 'app',
    template: `<textarea [(ngModel)]="mymodel"></textarea>
<br><br>
{{mymodel}}
`
})
class App {
public mymodel: any = "hello world";
    constructor() {}
}

设置和运行一个组件并在不同位置使用不同样式的最佳实践是什么？(动态风格？)

与css中的类的优先级相关的混淆,我知道在最后添加的类具有最高优先级,但在我的情况下,我认为我错了我动态地将类添加到div,但类不能正常工作

<p>Click the button to add the "mystyle" class to DIV.</p>

<script>
    function myFunction() {
    document.getElementById("myDIV").classList.add("mystyle","hello");
}
</script>

<style>
.hello{
background-color: blue;
}
.mystyle {
    background-color: red;
}
</style>

为什么div显示红色而不是蓝色？

Working Example

我已经尝试autoscroll="false"了router-outlet但似乎没有工作,是否有任何默认方法angular2做同样不使用任何第三方库？

我正在使用 Nodejs 研究与音频相关的技能，但是一旦我做了一些更改，我发现这里很难调试。

我添加了几个console.log并尝试添加debugger但我不明白在哪里检查那些console.log？

• 谁能告诉我调试 Alexa 技能的简单方法（我已经检查过console.awe.amazon但似乎与所有内容都无关）

如何在angular2.my路由配置的路由中定义可选参数,如下所示:

<a [routerLink]="['../abc',{xyz: blabla}]">
     and 
<a [routerLink]="['../abc']">

{ path: '/abc/:xyz', component: abc, name: 'abc' },  // Here i want xyz as optional perameter

所以问题是每当我使用第一个方法与参数blabla它工作正常,因为在路由时我已定义参数xyz 但在第二种方法的情况下我不想发送参数所以URL变为

HTTP://本地主机:8080 /#/ sideNav/ABC /

这是第一次罚款,但刷新页面后没有任何显示整个窗口变得空白,没有内容.那么有什么方法可以在angular2中路由时提供可选参数.

i have also tried without defining parameters like this

{ path: '/abc', component: abc, name: 'abc' }

但是如果1它转换1成xyz的值,这将抛出错误true

尝试使用angular2 cli和PrimeNG但面临错误:

http:// localhost:4200/vendor/primeng/primeng 404(未找到)

到目前为止我做了什么:

• npm install primeng

• 在angular-cli-build.js文件添加路径中,如下所示: -

    (...)
    'primeng/**/*.+(js|js.map)'
    (...)
  

  Run Code Online (Sandbox Code Playgroud)

• 并在我的组件中使用如下: -

   import {Calendar} from 'primeng/primeng';
  

  Run Code Online (Sandbox Code Playgroud)

但是找不到PrimeNG的错误.

我是否应该做任何其他事情来使这个工作？