Question

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

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

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.如果'ion-card'是一个Angular组件并且它有'scrollIntoView'输入，那么请确认它是该模块的一部分。   2.如果'ion-card'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息。   3.要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。（“

] [scrollIntoView] = “interval.key” ＆GT;
<ion-card-header> "): ng:///AppModule/SummaryPage.html@96:62 Error: Template parse errors: Can't bind to 'scrollIntoView' since it
不是“离子卡”的已知属性。   1.如果'ion-card'是一个Angular组件并且它有'scrollIntoView'输入，那么请确认它是该模块的一部分。   2.如果'ion-card'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息。   3.要允许任何属性将“NO_ERRORS_SCHEMA”添加到此组件的“@NgModule.schemas”。（“

] [scrollIntoView] = “interval.key” ＆GT;
<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 TypeError：无法读取属性'scrollTo'的未定义在SummaryPage.scrollTo（http://localhost:8100/build/main.js:71046:88）在http://localhost:8100/build/main.js:71015:19 在http://localhost:8100/build/main.js:95387:36 at Array.forEach（native）在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） at t.invokeTask（http://localhost:8100/build/polyfills.js:3:15213） at Object.onInvokeTask（http://localhost:8100/build/main.js:4415:37） at 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中读取，这可能会做你想要的事情：

For Each eachItem As ListViewItem In lstGroupPaymentDueCL.CheckedItems
    Dim Selected As Guid = eachItem.SubItems(7)
    Dim objPaymentLedgerData As PaymentLedgerData = GetPaymentLedgerByJobScheduleGUID(Selected)

 Public Function GetPaymentLedgerByJobScheduleGUID(ByVal guid As Guid) As PaymentLedgerData
    ........
 End Function

@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">

具有动态元素id的Angular 4 Renderer2

1 个答案: