具有動態元素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();
}