Question

嗨，我正在尝试将滚动应用到特定的角度元素上，我知道该如何做并且能够做到这一点，但是由于我需要在许多组件中使用它，因此我试图创建一个可重用的组件来保存列表项目并单击到特定列表时，我想滚动到该div到父级中的特定元素，但是以某种方式我无法访问父级中的模板引用变量

请检查下面的代码，并让我知道我如何使其工作（代码中包含许多文件，请检查下面的链接）

https://stackblitz.com/edit/angular-mwwfwk

点击孩子中的任何项目列表后，我将出现错误

AppComponent.html:47 ERROR TypeError: el.scrollIntoView is not a function
    at AppComponent.scrollToItem (app.component.ts:26)
    at Object.eval [as handleEvent] (AppComponent.html:47)
    at handleEvent (view.ts:138)
    at callWithDebugContext (services.ts:630)
    at Object.debugHandleEvent [as handleEvent] (services.ts:377)
    at dispatchEvent (util.ts:135)
    at eval (provider.ts:156)
    at SafeSubscriber.schedulerFn [as _next] (event_emitter.ts:123)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:265)

请帮助任何建议，

Answer 1

要传递给滚动组件的对象的名称类型为字符串，并且引用应该是HTMLElement，但它也是字符串。它必须是HTMLElement。

<scroll (clickedItem)="scroll($event)" [scrollItems]="[
 {name: 'Introduction', ref: introduction}, 
 {name: 'Content', ref: content}, 
 {name: 'Overview', ref: overview}]"></scroll>

有关固定演示，请参见https://stackblitz.com/edit/angular-ahzef1?file=src%2Fapp%2Fapp.component.html。

如何将模板引用变量传递给子组件

1 个答案: