小编Hon*_*iao的帖子

在Angular 1中,下面的代码运行良好.

<div ng-class="$varA === $varB ? 'css-class-1' : 'css-class-2'">

但是当我尝试在Angular 2中做类似的事情时.它不起作用.

我已经添加了 directives: [NgClass]

<div [ngClass]="varA === varB ? 'css-class-1' : 'css-class-2'">

我应该怎么写Angular 2,谢谢!

编辑:这是我的错误,我不小心添加{ }到了整体varA === varB ? 'css-class-1' : 'css-class-2'.所以ngClass仍然可以在Angular 2中使用三元运算符.

当我vagrant up在 macOS 上运行时出现此错误：

为仅主机网络配置的 IP 地址不在允许的范围内。请将以前的地址更新到允许的范围内，然后再次运行该命令。

地址：192.168.10.10 范围：192.168.56.0/21

相同Vagrantfile，但现在不行了。

任何想法？

我正在使用Angular 2和D3.js. 我想要显示一个红色矩形.

它只适用于我在style.css文件中放置样式.检查这个plunkr

当我将我的样式放在组件中时styles: [],它不起作用.检查这个plunkr

使用组件时如何让它工作styles: []？谢谢

更新: @micronyks提供了一个解决方案,但它使组件中的样式全局化,与style.css文件中的写入基本没有区别.在这个plunkr中,它显示一个组件中的样式将覆盖另一个组件的样式,因此无法显示绿色和红色矩形.

更新2: @Günter的方式完美解决了这个问题!只是提醒一下,对于Günter的方式:它至少需要Angular beta 10.(我的其他插件使用Angular beta 8)使用Angular beta 12的绿色和一个红色矩形的工作演示就在这里.

import {Component} from 'angular2/core'
@Component({
  selector: 'my-app',
  providers: [],
   styles: [`
    /*this does not work*/
    .bar {
      fill: red;
    }
  `],
  template: `
    <div>
      <svg class="chart"></svg>
    </div>
  `,
  directives: []
})
export class App {
  constructor() {}

  ngOnInit() {
    this.draw();
  }

  draw() {
    let data = [{name: 'A', …

我正在使用Angular-Meteor框架构建一个Angular 2应用程序.

我想实现快速和一致的索引谷歌和其他搜索引擎,让Facebook的分享者和其他刮削器生成我的JS生成内容的预览.

通常,SPA使用PhantomJS呈现页面服务器端并将静态HTML发送到客户端.

当然,我可以生成PhantomJS自己,当我拦截_escaped_fragment_或当我看到谷歌或刮刀用户代理,但我总是经历了内存泄漏,并直接与大流量的网站产卵PhantomJS当孤儿幻影情况下(我用的NodeJS和这个模块).

对于Angular 1应用程序,我曾经使用像Angular-SEO这样的角度模块来解决这个问题,但似乎很难将这样的模块转换为角度2.

我还没有找到任何合适的Angular 2模块.我应该自己构建它,还是有任何其他好方法来实现这一点？

通常我们用data-target="#myModal"它<button>来打开一个模态.现在我需要使用代码来控制何时打开模态.

如果我使用[hidden]或*ngIf显示它,我需要删除class="modal fade",否则,模态永远不会显示.像这样:

<div [hidden]="hideModal" id="myModal">

但是,在这种情况下,移除后class="modal fade",模态不会淡入并且背景中没有阴影.更糟糕的是,它将显示在屏幕底部而不是屏幕中心.

有没有办法保持class="modal fade"和使用代码打开它？

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
    </div>
  </div>
</div>

我正在使用Angular 2.

当我使用这两个中的任何一个时,我的程序运行良好:

import { BehaviorSubject } from 'rxjs/Rx';
import { BehaviorSubject } from 'rxjs';

但是,我尝试使用以下方法:

import { BehaviorSubject } from 'rxjs/subject/BehaviorSubject';

但我失败了,我的浏览器控制台显示:

未捕获错误:找不到模块'rxjs/subject/BehaviorSubject'

我怎样才能正确使用第三种方式？谢谢

我正在使用Mongoose聚合(MongoDB版本3.2).

我有一个users数组的字段.我希望$project将此数组中的第一项作为新字段user.

我试过了

  { $project: {
    user: '$users[0]',
    otherField: 1
  }},

  { $project: {
    user: '$users.0',
    otherField: 1
  }},

  { $project: {
    user: ? $first: '$users'},
    otherField: 1
  }},

但都不起作用.

我该怎么做才能正确？谢谢

我使用通用启动器作为主干.

当我的客户端启动时,它会从localStorage读取有关用户信息的令牌.

@Injectable()
export class UserService {
  foo() {}

  bar() {}

  loadCurrentUser() {
    const token = localStorage.getItem('token');

    // do other things
  };
}

一切都很好,但是由于服务器渲染,我在服务器端(终端)得到了这个:

EXCEPTION:ReferenceError:未定义localStorage

我从ng-conf-2016-universal-patterns获得了这个想法,它使用依赖注入来解决这个问题.但那个演示真的很老了.

说我现在有这两个文件:

main.broswer.ts

export function ngApp() {
  return bootstrap(App, [
    // ...

    UserService
  ]);
}

main.node.ts

export function ngApp(req, res) {
  const config: ExpressEngineConfig = {
    // ...
    providers: [
      // ...
      UserService
    ]
  };

  res.render('index', config);
}

现在他们使用相同的UserService.有人可以提供一些代码来解释如何使用不同的依赖注入来解决这个问题吗？

如果有另一种更好的方式而不是依赖注入,那也很酷.

更新1我正在使用Angular 2 RC4,我尝试了@Martin的方式.但即使我导入它,它仍然在下面的终端给我错误:

终点站(npm开始)

/my-project/node_modules/@angular/core/src/di/reflective_provider.js:240 throw new reflector_exceptions_1.NoAnnotationError(typeOrFunc,params); …

我正在将@ ngrx/effects从1.x 更新为2.x.

在1.x中,我可以访问状态树:

  constructor(private updates$: StateUpdates<AppState>) {}

  @Effect() bar$ = this.updates$
    .whenAction(Actions.FOO)
    .map(obj => obj.state.user.isCool)
    .distinctUntilChanged()
    .filter(x => x)
    .map(() => ({ type: Actions.BAR }));

现在在2.x中,它只给了我动作.还有办法访问状态树吗？或者我应该避免这样使用,因为这不是一个好习惯吗？

  constructor(private actions$: Actions) {}

  @Effect() bar$ = this.actions$
    .ofType(ActionTypes.FOO)
    .map((obj: any) => {
      console.log(obj);              // here is action only
      return obj.state.user.isCool   // so it is wrong here
    })
    .distinctUntilChanged()
    .filter(x => x)
    .map(() => ({ type: ActionTypes.BAR }));

我正在使用Angular 2和ngrx/store.我想在用户调度时重置整个商店状态USER_LOGOUT.

我读了Dan Abramov关于如何重置Redux商店状态的答案？,但我没有弄清楚如何rootReducer正确编写以及在使用ngrx/store时将其放在何处.

或者还有其他方法可以在ngrx/store中处理这个问题吗？

bootstrap(App, [
    provideStore(
      compose(
        storeFreeze,
        storeLogger(),
        combineReducers
      )({
        router: routerReducer,
        foo: fooReducer,
        bar: barReducer
      })
    )
  ]);