小编Rah*_*ngh的帖子

我混淆了两个函数indexOf和在数组中查找Index之间的区别.

文件说

findIndex - 返回谓词为true的数组中第一个元素的索引,否则返回-1.

和

indexOf - 返回数组中第一次出现值的索引.

我正在研究一个有角度的1.xx项目,并考虑将我的代码升级为angular 2.

现在在我的项目中,我有许多服务(工厂)来处理数据,几乎将数据保存在js数组(缓存和存储)中,并使用下划线处理数组来处理这些数据.

我在angular2中使用ngrx发现了很多例子.

使用商店比较使用数据服务处理数据有什么好处？

如果我有多种数据类型(库存,订单,客户......),我的应用程序是否需要多个商店？

如何构建(设计)我的应用程序来处理这些多种数据类型？

我有以下app root:

@Component({
    selector: 'my-app',
    providers: [],
    templateUrl: `<button (click)="callChildFunction()">Close</button>
                  <router-outlet></router-outlet>`
})
export class AppComponent {

    constructor() {

    }

    callChildFunction(){
        // Call myFunction() here
    }

}

这是我的孩子(使用的组件router-outlet):

@Component({
    selector: 'child',
    providers: [],
    templateUrl: `<div>Hello World</div>`
})
export class ChildComponent {

    constructor() {

    }

    myFunction(){
        console.log('success');
    }

}

我发现我可以使用RouterOutlet来获取组件函数,但似乎无法从应用程序根目录中访问它.

如何myFunction()从应用程序根调用？

我已经在Angular中创建了一个布局管理器,它可以接收组件,然后在视图中显示它,并在视图中显示每个组件时将动画添加到视图中.

在单个时刻,可以在视图中显示一个面板或最多两个面板.

这是Stackblitz link同样的问题,这是过渡不平滑,它也显示为流线型,因为它应该是设计如下.

现在我想要实现的是当应用程序加载1-2时默认显示但是当我更改面板时,转换会像

1-3当2移动到视野之外它应该向左滑动和缓和而且3应该进入并且缓和.然后,如果从1-3开始我们进入2-3 1应该向右缓和,2应该滑入.

此外,面板可以占屏幕宽度的一些百分比(33%,66%或100%).

我不确定我是否能够正确地解释它我已经被困在这几个星期过渡如果有人可以帮助它会很棒,谢谢

感谢萨达姆帮助创建了这个动画,这正是我想要的动画 - https://imgur.com/a/qZ3vtDb这仅用于视觉目的

gulp任务

/* Run the npm script npm run buildLsdk using gulp */
gulp.task('sdk', function() {
  if (process.cwd() != basePath) {
    process.chdir('..');
    // console.log(process.cwd());
  }
  spawn('./node_modules/.bin/lb-sdk', ['server/server.js', './client/src/app/shared/sdk', '-q'], {stdio: 'inherit'});
});

我得到以下堆栈跟踪但我无法调试

Error: spawn ./node_modules/.bin/lb-sdk ENOENT
    at exports._errnoException (util.js:1022:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:359:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:607:11)
    at run (bootstrap_node.js:420:7)
    at startup (bootstrap_node.js:139:9)
    at bootstrap_node.js:535:3

我在节点模块中有所有必要的文件,任何帮助都非常感谢.

有关上面文件使用的更多参考 - https://github.com/rahulrsingh09/loopback-Angular-Starter/blob/master/gulpfile.js

最近我一直在使用Angular HttpClient拦截器.

我添加了与某些HTTP GET方法相对应的标头,对于某些我不需要这些标头.

如何告诉我的拦截器有条件地将拦截器添加到那些方法？我甚至可以拆分服务,例如一个服务用于标头,一个服务没有标题,一个用于不同的标题,一个用于不同的标题.

NgModule提供商

{
  provide: HTTP_INTERCEPTORS,
  useClass: AuthInterceptor,
  multi: true,
},{
  provide: HTTP_INTERCEPTORS,
  useClass: AngularInterceptor,
  multi: true,
}

MyInterceptors

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({headers: req.headers.set('X-Auth-Token', "-------------------------")});
    return next.handle(authReq);

  }
}


@Injectable()
export class AngularInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).do(event => {}, err => {
        if(err instanceof HttpErrorResponse){
            console.log("Error Caught By Interceptor");
            //Observable.throw(err);
        }
    });
  }
}

我从这个链接http://plnkr.co/edit/yV94ZjypwBgHAlb0RLK2?p=preview实现了代码,但是得到了推送和控制错误.

这是我做了什么,不知道它有什么问题.

import { Component } from '@angular/core';
import { ViewController,Platform } from 'ionic-angular';
import { FormBuilder,FormGroup,Validators,FormControl,FormArray } from '@angular/forms';

@Component({
  selector: 'filter-vendor',
  templateUrl: 'filter-vendor.html'
})

export class FilterVendorPage {




  questions = [{id:1,text:'Question 1', answers:[{id:1},{id:2}]},{id:2,text:'Question 2', answers:[{id:11},{id:22}]}]
  surveyForm:FormGroup;



  constructor(
    private viewCtrl: ViewController, 
    private formBuilder:FormBuilder
     ){


      this.surveyForm=this.formBuilder.group({
        question:formBuilder.array([])
      })

      for(var i=0;i<this.questions.length;i++){
          let question=formBuilder.group({
            question_id:[this.questions[i].id,Validators.required],
            answer_id:formBuilder.array([])
          });
          this.surveyForm.controls['questions'].push(question);
      }
}


   onChange(id, isChecked, index) {

    const answers = <FormArray>this.surveyForm.controls.questions.controls[index].controls.answer_ids

    if(isChecked) {
          answers.push(new FormControl(id))
        } else {
          let idx = answers.controls.findIndex(x => …

我使用innerHTML在我的组件中呈现HTML内容.但是innerHTML删除HTML内容中的所有属性(例如:删除样式属性)并呈现它.但需要按原样呈现,并且不希望从HTML内容中提取任何属性.是否有任何与innerHTML等效的内容,或者我们是否可以使用innerHTML完成所需的结果.提前致谢.

我的模板文件

<div id="more-info-box" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Title</h4>
            </div>
            <div class="modal-body">
                <div class="clearfix">
                    <div [innerHTML]="htmlContent" class="long-desc-wrap">
                    </div>
                </div>
            </div>
         </div>
    </div>
</div><!-- End Info box -->

我的组件文件

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


@Component({
  selector: 'cr-template-content',
  templateUrl: './app/channel.component.html'
})
export class TemplateComponent {
  constructor() {

  }

  htmlContent = '<p>This is my <strong style="color:red">Paragraph</strong></p>'

}

我当前的输出是没有样式属性的内容.但是期望的结果应该是style属性.

这个组件的模板是这样的

<ng-template #primary @fading><ng-content select="[primary]"></ng-content></ng-template> // gives error
<ng-template #secondary> <ng-content select="[secondary]"></ng-content></ng-template>


<ng-container *ngIf="(mode | async)=== mode_layout_100_0">
  <div class="h-100">
    <ng-container *ngTemplateOutlet="primary"></ng-container>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_0_100">
  <div class="h-100">
    <ng-container *ngTemplateOutlet="secondary"></ng-container>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_33_66">
  <div class="d-flex flex-row h-100 split-view" @fading> // dosent work 
    <div class="d-none d-sm-none d-md-none d-lg-block col-lg-4 p-0">
      <ng-container *ngTemplateOutlet="primary"></ng-container>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-8 p-0 view-seperator">
      <ng-container *ngTemplateOutlet="secondary"></ng-container>
    </div>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_66_33">
  <div class="d-flex flex-row h-100 split-view"> …

I am trying to find a Fix for Importing libs in Angular .

I am following this open issue on github.

I am not able to get my head around this . My First Library is build and there in dist folder and in my new library when i try and import i get various errors.

Steps i have Tried

1) Importing in tsconfig.lib.json as per the open issue on github under complier options

Import in NgModule of the …