小编Ang*_*hef的帖子

我正在使用WebStorm进行Angular 2项目.

我在TypeScript和我使用的一个组件中编写代码Observable:

import { Observable } from "rxjs/Rx";
import 'rxjs/Rx';

@Component({...})
export class SearchComponent {

  @ViewChild('input') input: ElementRef;

  ngAfterViewInit() {
    let inputElement = this.input.nativeElement;
    let keyups = Observable.fromEvent(inputElement, 'keyup');  // <-- WebStorm error
    keyups.subscribe(data => console.log(data));
  }
}

这段代码确实有效(每次在输入字段中输入内容时都会记录到控制台),但WebStorm会抱怨该fromEvent方法("未解析的函数或方法").

此外,如果我在Observable类上触发自动完成,则缺少RxJS文档中列出的大多数运算符.例如,打字Observable.fr应该产生的名单from,fromCallback,fromEvent,fromPromise...但WebStorm只表明一种方法(withLatestFrom).

如何在WebStorm中为可观察对象获得正确的自动完成/ TypeScript支持？

我曾尝试不同的方式导入Observable,我已经试过的建议在这篇文章中(即添加"files": ["node_modules/rxjs/Rx.KitchenSink.d.ts"]到tsconfig.json),但毫无效果.

我有一个AngularJS单页面应用程序显示3个视图(实际上是3个指令).为了说明我的问题,让我们假设我的UI与GMail的UI相同,我的3个视图是:

• 导航窗格(左) - GMail显示"收件箱","草稿"等文件夹......
• 工具栏(右上角) - GMail显示按钮的位置
• 内容窗格(右下角) - GMail显示消息的位置

每当路径发生变化时,这3个视图都需要自我更新.例如:

• 导航窗格需要突出显示特定项目.
• 工具栏需要显示/隐藏某些按钮.
• 内容窗格需要从服务器加载和显示特定数据.

在AngularJS中执行此操作的最佳方法是什么？

到目前为止,我有:

1. 排除了$ routeProvider.when()的使用,因为我需要更新三个视图,并且$routeProvider只支持一个视图ngView.
2. 创建一个监视当前路径的SERVICE并使用$ rootScope.$ broadcast()来警告控制器路径已更改.
3. (或者,取代#2)创建一个与#2相同的控制器.
4. 使用$ scope. $ on()捕获#2或#3广播的事件(我在视图控制器中执行此操作).

这种作品,但我有几个问题:

• 在我的事件监听器到位之前,通常会广播"路径更改"事件,尤其是在初始页面加载时.这可能是因为我的视图模板是从服务器加载的,并且在模板加载完成之前无法设置监听器.
• 是不是有一种更有效/自动化的方式来监视AngularJS中的路径变化？(参见下面的代码,看起来非常"手动".)
• 监视路径更改的代码是属于SERVICE还是CONTROLLER？(我倾向于服务,因为控制器更多是为视图添加行为.)
• 如何保证我的观点能够抓住"路径改变"事件？我应该使用一个活动吗？(也许我可以将路径存储在服务中,让我的视图代替服务？)

我需要注意路径更改的代码(我把它放在服务中或控制器中):

var watchExpression = function() { return $location.path(); };
var listener = function(newPath, oldPath) {
    // Broadcast event on $rootScope
    $rootScope.$broadcast('PathChanged', newPath);
};
$rootScope.$watch(watchExpression, listener);

然后,在视图控制器中,我捕获事件:

$scope.$on('PathChanged', function(event, …

我有一个NgModule位于/src文件夹外部的Angular CLI项目(最终这个NgModule将打包为npm模块,但现在我只是把它留在了外面/src).

我正在尝试为这个NgModule编写单元测试,但ng test似乎没有拾取.spec.ts文件/src夹之外的文件.

我试过改变路径/src/test.ts:

// Original
const context = require.context('./', true, /\.spec\.ts$/);

// Does not work
const context = require.context('../', true, /\.spec\.ts$/);

// Does not work
const context = require.context('/absolute/path/to/ngmodule', true, /\.spec\.ts$/);

但是我收到一个错误: Module build failed: Error: /absolute/path/to/file.spec.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

我也尝试在以下include属性中添加我的NgModule路径tsconfig.spec.json:

"include": [ …

只要承诺尚未解决,我想阻止访问路由.另外,我想将该promise的返回值传递给路由组件.

SO上的几个帖子建议使用这个OnActivate接口.该文件说:"如果routerOnActivate返回一个承诺,路线变化将等到承诺平息实例化和启动子组件 ".听起来很完美,只有路线仍然会立即激活...(是因为它是Route2 的子组件会等待承诺,而不是Route2组件本身??)

请参阅https://plnkr.co/edit/ipKrOgfRj0vKk8ZejH5v?p=preview.Route2组件实现了OnActivate接口,但是当您单击Route2链接时,会立即激活Route2组件.但是,URL /route2仅在承诺解决后才会更新.(在一个单独的窗口中启动Plunker以查看我的意思.)现在我不太关心URL,在解决promise之前,Route2组件根本不应该实例化.

我的另一个策略是使用@CanActivate装饰器.它更适合我的目的,"路由器调用它来确定组件是否可以实例化为导航的一部分".

这里的问题是如何将数据从@CanActivate装饰器中的promise传递给组件？

我看到人们将他们的数据写入next装饰器参数的属性,并next在routerOnActivate方法的参数中检索它.

例如在next.params(这里):

@CanActivate((next) => {
  return messageService.getMessage()
      .then((message) => {
         next.params.message = message;
         return true;
      });
})
export class MyComponent implements OnActivate {
  routerOnActivate(next) {
    this.message = next.params.message;
  }
}

或者next.routeData.data(在这里).

但是文档 …

我有一个表单，用户可以在文本区域中输入 markdown 格式的文本。我想展示一个准实时预览在字段旁边显示解析后的降价

t---t--ttt------tt-ttt------t---|
----------------t-----------t---|