小编ng2*_*ser的帖子

如果我已经在我的商店中拥有数据,我想避免两次调用API.

我如何使用Redux执行此操作？

我想知道这样做是否有任何好处:

  <div>{{getSomething()}}</div>

  export class MyComp {
    getSomething() { return ...}
  }

在此:

 <div>{{getSomething}}</div>

 export class MyComp {
   get getSomething() { return ...}
 }

使用方法与getter来显示计算数据.

我想测试使用异步管道的组件.这是我的代码:

@Component({
  selector: 'test',
  template: `
    <div>{{ number | async }}</div>
  `
})
class AsyncComponent {
  number = Observable.interval(1000).take(3)
}

fdescribe('Async Compnent', () => {
  let component : AsyncComponent;
  let fixture : ComponentFixture<AsyncComponent>;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [ AsyncComponent ]
      }).compileComponents();
    })
  );

  beforeEach(() => {
    fixture = TestBed.createComponent(AsyncComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });


  it('should emit values', fakeAsync(() => {

    tick(1000);
    fixture.detectChanges();
    expect(fixture.debugElement.query(By.css('div')).nativeElement.innerHTML).toBe('0');

});

但测试失败了.从某种原因看,Angular似乎没有执行到Observable.我错过了什么？

当我尝试使用do运算符记录observable时,我在浏览器控制台中看不到任何输出.

我试图从lodash只导入一个函数,如下所示:

import get from 'lodash/get';

我已经安装了lodash和@ types/lodash,我收到了这个错误:

@ types/lodash/get/index"'没有默认导出.)

我想创建一个新的运算符,我在文档中发现其中一种方法是执行以下操作:

class MyObservable extends Observable {
  lift(operator) {
    const observable = new MyObservable()
    observable.source = this;
    observable.operator = operator;
    return observable;
  }

  // put it here .. or ..
  customOperator() {
    /* do things and return an Observable */
  }
}

// ... put it here...
MyObservable.prototype.mySimpleOperator = mySimpleOperator;

我不明白这个lift方法是什么,这里发生了什么,有人可以帮忙吗？

我有一个具有这种结构的 npm 包：

--src
  --styles
     -image.png
     -style.scss

该style.scss文件正在引用这样的图像：

.test {
   background-image: url(./image.png);
}

问题是当我使用包时，CSS 正在从根查看图像而不是相对于我的包，我们如何解决这个问题？

这是我导入包的方式：

@import "mypackage/src/styles/style";

我有一个带有箭头和箭头边框的工具提示,但我需要箭头来获取工具提示的方框阴影我怎么能这样做？

我需要一个跨浏览器的解决方案.我不能使用CSS过滤器.

.tooltip {
  position: absolute;
}

.arrow_box {
  position: relative;
  background-color: #fff;
  border: 1px solid lightgrey;
  border-radius: 2px;
  padding: 12px;
  box-shadow: 1px 1.5px 4px 0px rgba(170, 174, 181, 0.45);
  -webkit-transform: translateX(6px);
          transform: translateX(6px);
}

.arrow_box:after, .arrow_box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}

.arrow_box:before {
  border-color: rgba(211, 211, 211, 0);
  border-right-color: #d3d3d3; …

如果我有这样的事情:

class MyComponent {

  constructor() {

    this.interval = Observbale.interval(1000);

  }
}

const c = new MyComponent();
const subscription = c.interval.subscribe(() => { ... })

现在让我们说在某一点上我这样做:

c = null;

我还需要打电话subscription.unsubscribe()或GC会照顾这个"泄漏"吗？

我知道如果我们正在开发Angular运行两次更改检测.在以下示例中,Angular运行四次更改检测.为什么会这样？

class Category {
  constructor( private _id ) {
  }

  get id() {
    console.log('id');
    return this._id;
  }

}

@Component({
  selector: 'app-select',
  template: `
      <select class="form-control">
        <option *ngFor="let option of options;" [value]="option.id">{{option.id}}</option>
      </select>
  `,
})
export class SelectComponent {
  @Input() options;
}

@Component({
  selector: 'my-app',
  template: `
    <app-select [options]="options"></app-select>
  `,
})
export class App {
  options = [new Category(1)]
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, SelectComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

如果您运行上面的代码,您将看到控制台日志运行八次而不是四次.