具有动态元素ID的Angular 4 Renderer2

Question

我有一个动态id ，如下所示。您能告诉我如何从组件（ ts ）文件中获取此id吗？

注意：我的要求是，当用户单击按钮时，我需要将内容滚动到该动态项目（实际上这是条形图的一个项目，我可以处理。）

html的

<ion-card *ngFor="let interval of intervals; let i = index" id="{{interval.key}}">
    <ion-card-header>
      {{interval.sleepingTimeRange}} {{interval.timeDuration}}
    </ion-card-header>
    <ion-card-content>
      {{interval.notes}}
    </ion-card-content>
  </ion-card>

我尝试了如下所示，但是我知道这是一种非常糟糕的方式。如何使用Angular 4 Renderer2做到这一点？

.TS

 scrollTo(elementId: string) {
        let yOffset = document.getElementById(elementId).offsetTop;//This is BAD
        this.content.scrollTo(0, yOffset, 4000)
    }

这是调用scrollTo()的方法。

subscribeIntervals(): void {
        this.events.subscribe('intervals', (data, selectedItem) => {
            this.intervals = [];

            _.forEach(data, (value, key) => {
                let interval: any = {
                    notes: '',
                 };

                interval.key = value.key;
                this.intervals.push(interval);
            });

            this.scrollTo(selectedItem.key);//scroll to

        });
    }

错误：实施@GünterZöchbauer解决方案时

polyfills.js：3错误：未捕获（承诺）：错误：模板解析错误：由于它不是“离子卡”的已知属性，因此无法绑定到“ scrollIntoView”。 1.如果“离子卡”是Angular组件，并且具有“ scrollIntoView”输入，则请验证它是否是此模块的一部分。 2.如果“ ion-card”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。 3.要允许任何属性，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。 （”

] [scrollIntoView] = “interval.key”>

 <ion-card-header> "): ng:///AppModule/SummaryPage.html@96:62 Error: Template parse errors: Can't bind to 'scrollIntoView' since it 

不是“离子卡”的已知属性。 1.如果“离子卡”是Angular组件，并且具有“ scrollIntoView”输入，则请验证它是否是此模块的一部分。 2.如果“ ion-card”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。 3.要允许任何属性，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。 （”

] [scrollIntoView] = “interval.key”>

 <ion-card-header> "): ng:///AppModule/SummaryPage.html@96:62 at g (http://localhost:8100/build/polyfills.js:3:7133) at syntaxError (http://localhost:8100/build/main.js:113362:34) at TemplateParser.parse (http://localhost:8100/build/main.js:123371:19) at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:137054:39) at http://localhost:8100/build/main.js:136978:62 at Set.forEach (native) at JitCompiler._compileComponents (http://localhost:8100/build/main.js:136978:19) at createResult (http://localhost:8100/build/main.js:136863:19) at t.invoke (http://localhost:8100/build/polyfills.js:3:14529) at n.run (http://localhost:8100/build/polyfills.js:3:9741) at http://localhost:8100/build/polyfills.js:3:6774 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213) at n.runTask (http://localhost:8100/build/polyfills.js:3:10390) at a (http://localhost:8100/build/polyfills.js:3:5313) at g (http://localhost:8100/build/polyfills.js:3:7133) at syntaxError (http://localhost:8100/build/main.js:113362:34) at TemplateParser.parse (http://localhost:8100/build/main.js:123371:19) at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:137054:39) at http://localhost:8100/build/main.js:136978:62 at Set.forEach (native) at JitCompiler._compileComponents (http://localhost:8100/build/main.js:136978:19) at createResult (http://localhost:8100/build/main.js:136863:19) at t.invoke (http://localhost:8100/build/polyfills.js:3:14529) at n.run (http://localhost:8100/build/polyfills.js:3:9741) at http://localhost:8100/build/polyfills.js:3:6774 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213) at n.runTask (http://localhost:8100/build/polyfills.js:3:10390) at a (http://localhost:8100/build/polyfills.js:3:5313) at g (http://localhost:8100/build/polyfills.js:3:7133) at l (http://localhost:8100/build/polyfills.js:3:6251) at l (http://localhost:8100/build/polyfills.js:3:5937) at http://localhost:8100/build/polyfills.js:3:6765 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213) at n.runTask (http://localhost:8100/build/polyfills.js:3:10390) at a (http://localhost:8100/build/polyfills.js:3:5313) 

错误2：

core.es5.js：1085 ERROR类型错误：（无法在SummaryPage.scrollTo读取属性'scrollTo'的未定义88：//本地主机：8100 /构建/ main.js：71046 HTTP在） 的http：//本地主机：8100 /在Event.publish的Array.forEach（本机）在http：// localhost：8100 / build / main.js：95387：36在build / main.js：71015：19 （在http：// localhost：8100 / build / main .js：95386：11 ）。 （ http：// localhost：8100 / build / main.js：138265：34 ）在SVGRectElement处。 （ http：// localhost：8100 / build / main.js：55277：16 ）在t.invokeTask（ http：// localhost：8100 / build / polyfills.js：3：15213 ）在Object.onInvokeTask（ http：/ /localhost:8100/build/main.js:4415:37 ）位于t.invokeTask（ http：// localhost：8100 / build / polyfills.js：3：15134 ）位于n.runTask（ http：// localhost：8100） /build/polyfills.js:3:10390 ），位于SVGRectElement.invoke（ http：// localhost：8100 / build / polyfills.js：3：16170 ）

Answer 1

这可能会做您想要的而无需阅读DOM：

@Directive({
  selector: '[scrollIntoView]'
})
class ScrollIntoViewDirective {
  @Input() key:string;

  constructor(private elRef:ElementRef) {}

  srcrollTo() {
    this.elementRef.nativeElement.scrollIntoView();
  }
}

<ion-card *ngFor="let interval of intervals; let i = index" 
   [scrollIntoView]="interval.key">

@ViewChildren(ScrollIntoViewDirective) scrollIntoView:QueryList<ScrollIntoViewDirective>;

scrollTo(elementId: number) {
  this.scrollIntoView.toArray().find((s) => s.key == elementId).scrollTo();
}