小编Ank*_*ngh的帖子

我已经定义了许多路由如下:

export const AppRoutes: Routes = [
  {path: '', component: HomeComponent, data: {titleKey: 'homeTitle'}},
  {path: 'signup', component: SignupComponent, data: {titleKey: 'SIGNUP_FORM.TITLE'}},
  {path: 'signin', component: SigninComponent, data: {titleKey: 'SIGNIN_FORM.TITLE'}},
  {path: 'sendpasswordresetinformation', component: SendPasswordResetInformationComponent},
  {path: 'password/reset/:userAccountToken', component: PasswordResetComponent},
  {
    path: 'dashboard', component: DashboardComponent, children: [
    {path: '', component: DashboardSummaryComponent},
    {
      path: 'message', children: [
      {path: '', component: MessageSummaryComponent, data: {titleKey: 'MESSAGE_LIST.TITLE'}},
      {path: 'conversation/:otherId', component: MessageConversationComponent, data: {titleKey: 'XXX'}}]
    },
    {
      path: 'useraccount', component: UserAccountComponent, children: [
      {
        path: '',
        component: UserAccountSummaryComponent,
        data: …

我们正在使用

TestBed.overrideComponent(CoolComponent, {
    set: {
      template: '<div id="fake-component">i am the fake component</div>',
      selector: 'our-cool-component',
      inputs: [ 'model' ]
    }
  })

覆盖组件.

该组件有一个ViewChild,我们在ngOnInit方法中配置它

@Component({
  selector: 'our-cool-component',
  templateUrl: 'cool.component.html'
})
export class CoolComponent implements OnInit, OnDestroy {
  @Input() model: SomeModel
  @ViewChild(CoolChildComponent) coolChildComponent;

  ngOnInit() {
    this.coolChildComponent.doStuff();
  }
}

在CoolComponent又住在一个Wrapper组件.

当我们调用fixture.detectChanges()上的Wrapper夹具,这个试图构建CoolComponent,但是当它调用doStuff立即死亡(),因为CoolChildComponent是不确定的.

有没有办法找到CoolComponent它的存根CoolChildComponent？看起来我们不能把它搞定,Wrapper因为它只是通过模板引用,而不是作为组件的属性引用.

我刚刚开始使用Unit-Testing,我已经能够模拟我自己的服务以及一些Angular和Ionic,但无论我做什么都ChangeDetectorRef保持不变.

我的意思是这是什么样的巫术？

beforeEach(async(() => 
    TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [
        Form, DomController, ToastController, AlertController,
        PopoverController,

        {provide: Platform, useClass: PlatformMock},
        {
          provide: NavParams,
          useValue: new NavParams({data: new PageData().Data})
        },
        {provide: ChangeDetectorRef, useClass: ChangeDetectorRefMock}

      ],
      imports: [
        FormsModule,
        ReactiveFormsModule,
        IonicModule
      ],
    })
    .overrideComponent(MyComponent, {
      set: {
        providers: [
          {provide: ChangeDetectorRef, useClass: ChangeDetectorRefMock},
        ],
        viewProviders: [
          {provide: ChangeDetectorRef, useClass: ChangeDetectorRefMock},
        ]
      }
    })
    .compileComponents()
    .then(() => {
      let fixture = TestBed.createComponent(MyComponent);
      let cmp = fixture.debugElement.componentInstance;

      let cdRef = fixture.debugElement.injector.get(ChangeDetectorRef);

      console.log(cdRef); // logs …

使用systemjs.config.js时如何创建角度2构建文件夹

我的应用在本地工作正常.我需要帮助我的gulp文件,所以我可以获取所需的节点模块,并将它们移动到dist文件夹准备部署.

这是我的gulp文件夹:

const gulp = require('gulp');
const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
var htmlreplace = require('gulp-html-replace');
var addsrc = require('gulp-add-src');
var sass = require('gulp-sass');    
var inject = require('gulp-inject');
var del = require('delete');
var minifyCss = require('gulp-minify-css');    
var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();

gulp.task('app-bundle', function () {
  var tsProject = ts.createProject('tsconfig.json', {
      typescript: require('typescript'),
      outFile: 'app.js'
  });

  var tsResult = gulp.src([
    'node_modules/angular2/typings/browser.d.ts',
    'typings/main/ambient/firebase/firebase.d.ts',
    'app/**/*.ts'
  ])
    .pipe(ts(tsProject));

  return tsResult.js.pipe(addsrc.append('config-prod.js'))
                    .pipe(concat('app.min.js'))
                    .pipe(uglify())
                    .pipe(gulp.dest('./dist')); …

这是一个Angular2应用程序,该组件在这里简化为:

@Component({
    selector: 'courses',
    template: `
        <input [(ngModel)]="wahla">
        <input [(ngModel)]="wahla">
        {{ wahla }}
        `
})
export class CoursesComponent {
    wahla = "hmm hmm ha ha";
}

我认为应用程序在一个页面中使用双向绑定工作正常,但是如果我用http:// localhost:3000 /打开另一个选项卡然后在第一页的第一个输入框中粘贴或键入内容,那么第二个tab实际上为其第一个输入框更新,而第二个输入框和静态文本不更新.

对于第一个选项卡,所有内容都按预期更新.

这应该发生还是可能出错？这正在运行使用npm startBrowserSync运行lite-server.

<div [innerHTML]="html"></div>当html包含Iframe时不起作用.我试图做一些安全绕过this.sanitizer.bypassSecurityTrustResourceUrl(...,但它仍然无法正常工作.

这是使用angular2无法正确注入的演示.

我希望我的工具栏使用材料设计径向反应编排指南来改变颜色

我想将它实现为一个有角度的2转换,但我不知道如何做到这一点:

它看起来像这样..

@Component({
 ...
  animations: [
    trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
     })),
     state('active',   style({
       backgroundColor: '#cfd8dc',
       transform: 'scale(1.1)'
     })),
     transition('inactive => active', animate('100ms ease-in')),
     transition('active => inactive', animate('100ms ease-out'))
   ])
  ]
})

我想观看一个对象/数组,可以通过服务或控制器例程进行编辑.我以为Observable可以观看一个对象/数组.

我的实现不会对项目的更改做出反应:

  private data : Observable<Array<any>>;
  private dataObserver: Observer<Array<any>>;
  private sub : Subscription;
  private items: <Array<any>>;

  ngOnInit() {
     this.items = itemService.getItems();
     this.data = new Observable<Array<any>>(observer =>{
        this.dataObserver = observer;
     });
     this.data.subscribe(
        x => console.log('onNext: %s', x),
        e => console.log('onError: %s', e),
        () => console.log('onCompleted')
     );
     this.dataObserver.next(this.items);
  }


private start(){

  //change values of the array in an interval
  let loop = Observable.interval(250)
  let i=0;
  self.sub = loop.subscribe(() => {
      if(self.items[0]){
        self.items[0].id= i;
        if(i<100) i++;
        else i=1;
      }
  })
}

subsvaltion subsciption不会对items数组的更改做出反应.它只会在下一个mehtod上触发.另一方面..这对于简单的手表方法来说太麻烦了. …

我是angular2中的新开发者,我想在json对象数组中进行全局搜索.例如,这个数组:

invoiceList = 
  [
    {
      invoiceNumber: 1234, 
      invoiceSupplier: "test", 
      invoiceStatus: "Import error", 
      invoiceCategory: "invoice with GR", 
      date: "22/01/2017", 
      amount : 134527
    },
    ...
  ];

我想这样做我的搜索:

问题和困难在于:

• 我想仅根据某些值进行搜索(例如:状态,供应商名称,编号......)并显示其他字段(如日期,净金额等).
• 我想根据一些值(例如:数量,供应商,日期和金额)按最终结果排序.而且我不知道如何在angular2中做到这一点.
• 最后,我想在angular2中做一个"等效"的ng-show？我的意思是我只想按下搜索按钮才能显示表格,如果我们点击取消,它将删除它.

我知道在角度1中这样做很简单,我们可以使用过滤器,'orderBy'和类似的东西,但显然在angular2中,我们不能这样做而且我非常困惑.你能帮我解决一下吗???

这是我的组件代码:

  import { Component, OnInit } from '@angular/core';

  @Component({
    selector: 'app-search',
    templateUrl: './search.component.html'
  })
  export class SearchComponent implements OnInit {

  invoiceList = [{invoiceNumber:  1234, invoiceSupplier : "test", invoiceStatus : "Import error", invoiceCategory: "invoice with GR", date : "22/01/2017", amount : 134527}, 
  {invoiceNumber:  15672, invoiceSupplier : "test11", invoiceStatus : "Import error", …

我使用FormBuilder创建了一个ControlGroup .theForm

当我尝试更新这样的控件的值时

this.theForm.find('MainImageId').updateValue( id, true, true);

它工作正常,但WebStorm显示错误说

Error:(148, 24) TS2339: Property 'updateValue' does not exist on type 'AbstractControl'.

我究竟做错了什么？为什么它有效？