小编Gau*_*jee的帖子

我试图在Angular2中使用Hidden属性,当我包含一个改变DIV显示的样式时,隐藏的属性将被忽略.

运行以下代码时,将显示两个div.当我删除类.displayInline时,第一个DIV被隐藏,第二个DIV被显示(如预期的那样).

我可以一起使用隐藏和显示CSS吗？

import {ComponentAnnotation as Component, ViewAnnotation as View, bootstrap, NgIf} from 'angular2/angular2';

@Component({
    selector: 'hello'
})
@View({
    template: `<style>.displayInline{ display:inline }</style><span *ng-if="name">Hello, {{name}}!</span>
    <div>
                <div [hidden]="hideDiv1()" class="displayInline">should be hidden.</div>
                <div [hidden]="hideDiv2()" class="displayInline">should be displayed.</div>
    </div>`,
    directives: [NgIf]
})
export class Hello {
    name: string = 'World';
    constructor() {
        setTimeout(() => {
          this.name = 'NEW World'
        }, 2000);
    }

    hideDiv1(){
        return true;
    }   

    hideDiv2(){
        return false;
    }
}

bootstrap(Hello);

存储库:https://github.com/albi000/ng2-play

我有一个我正在使用的项目列表 *ngFor

<div id="container">
  <div 
      [class.selected]="selectedItem.id == item.id"
      #container 
      *ngFor="let item of items; indexBy: byId">{{item.name}}</div>
</div>

我会定期更新列表数组.

this.listService.index((items) => this.items = items)

我有一个selectedItem用于突出选择项目.

当我更新列表时,可以在所选项目(大部分)上方和所选项目下方添加新项目.当发生这种情况时,所选项目将远离当前视图位置.我想调整父div的scrollOffset是这样一种方式,列表中项目的位置保持在同一个视图位置.

更新:

为此,我正在储蓄

this.offset; = this.container.scrollHeight - this.container.scrollTop;

并在更新后添加了一行 this.items

this.listService.index((items) => {
  this.items = items
  this.container.scrollTop = this.container.scrollHeight - this.offset;
})

这不起作用,但用超时包装这个工作正是我想要的.

setTimeout(() => {
  this.scrollPosition.restore()
}, 300)

更新后this.items,渲染新的dom元素会有延迟.

如何获得添加新元素的事件？

我有一个组件，我用它来显示嵌入在组件中的代码块

<gs-code> console.log("Asd")</gs-code>

该组件看起来像这样

代码.组件.ts

    @Component({
        selector: 'gs-code',
        providers: [],
        viewProviders: [],
        templateUrl: './code.component.html',
        styleUrls: ['./code.component.less']
    })
    export class GsCodeComponent {
        @Input() lang: string;
        @Input() currentLang: string;
        @ContentChild('content') content;
        copied(event) {
            console.log(event);
        }

        ngAfterContentInit() {
            console.log(this.content, "content");
        }
    }

代码.component.html

<pre class="prettyprint">
   <ng-content #content></ng-content>
</pre>
<button class="btn btn-sm" title="Copy to clipboard" (click)="copied(content.innerHtml)"><i class="fa fa-clipboard"></i></button>

如何获取组件中嵌入的文本？我尝试过使用contentChildand#content作为<ng-content #content></ng-content>. 但这些都没有奏效。

我正在从 angular2 应用程序调用外部 API，该应用程序以分页形式提供数据。响应看起来像这样

{
   next: "next_url",
   results: []
}

我可以使用 Rxjs 或 Angular2 的内置 Http 类（它返回一个 observable）来连接下一个 url 的结果，直到

{
   next: null,
   results: []
}

我觉得我需要使用 concatMap 运算符，但我还没有弄清楚语法，因为我是 Reactive Extentions 的新手。