具有动态元素id的Angular 4 Renderer2-Java 学习之路

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

Note: 我的要求是，当用户点击按钮时，我需要将内容滚动到该动态项目（实际上这里是条形图项目 . 我可以处理它 . ）

.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

        });
    }

Error: When implemented the @Günter Zöchbauer solution

polyfills.js：3错误：未捕获（在承诺中）：错误：模板解析错误：无法绑定到'scrollIntoView'，因为它不是'ion-card'的已知属性 . 1.如果'ion-card'是一个Angular组件并且它有'scrollIntoView'输入，那么请确认它是该模块的一部分 . 2.如果'ion-card'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息 . 3.要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas” . （“] [scrollIntoView] =”interval.key“> <ion-card-header>”）：ng：///AppModule/SummaryPage.html@96:62错误：模板解析错误：无法绑定到'scrollIntoView '因为它
不是'离子卡'的已知属性 . 1.如果'ion-card'是一个Angular组件并且它有'scrollIntoView'输入，那么请确认它是该模块的一部分 . 2.如果'ion-card'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息 . 3.要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas” . （“] [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）
在TemplateParser.parse（http：// localhost：8100 / build / main.js：123371：19）
在JitCompiler._compileTemplate（http：// localhost：8100 / build / main.js：137054：39）
在http：// localhost：8100 / build / main.js：136978：62
at Set.forEach（native）
在JitCompiler._compileComponents（http：// localhost：8100 / build / main.js：136978：19）
在createResult（http：// localhost：8100 / build / main.js：136863：19）
at t.invoke（http：// localhost：8100 / build / polyfills.js：3：14529）
在n.run（http：// localhost：8100 / build / polyfills.js：3：9741）
在http：// localhost：8100 / build / polyfills.js：3：6774
at t.invokeTask（http：// localhost：8100 / build / polyfills.js：3：15213）
在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）
在TemplateParser.parse（http：// localhost：8100 / build / main.js：123371：19）
在JitCompiler._compileTemplate（http：// localhost：8100 / build / main.js：137054：39）
在http：// localhost：8100 / build / main.js：136978：62
at Set.forEach（native）
在JitCompiler._compileComponents（http：// localhost：8100 / build / main.js：136978：19）
在createResult（http：// localhost：8100 / build / main.js：136863：19）
at t.invoke（http：// localhost：8100 / build / polyfills.js：3：14529）
在n.run（http：// localhost：8100 / build / polyfills.js：3：9741）
在http：// localhost：8100 / build / polyfills.js：3：6774
at t.invokeTask（http：// localhost：8100 / build / polyfills.js：3：15213）
在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）
在l（http：// localhost：8100 / build / polyfills.js：3：6251）
在l（http：// localhost：8100 / build / polyfills.js：3：5937）
在http：// localhost：8100 / build / polyfills.js：3：6765
at t.invokeTask（http：// localhost：8100 / build / polyfills.js：3：15213）
在n.runTask（http：// localhost：8100 / build / polyfills.js：3：10390）
at a（http：// localhost：8100 / build / polyfills.js：3：5313）

Error 2 :

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

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();
}

回复于 2024-05-03T08:40:31+08:00

具有动态元素id的Angular 4 Renderer2

1 回答

相关问题