如何在页面加载时打开手风琴选项卡答案

【问题标题】：How to open accordion tab on page load如何在页面加载时打开手风琴选项卡
【发布时间】：2019-08-27 11:42:02
【问题描述】：

我想默认在页面加载时打开标签。现在它已折叠，要打开手风琴选项卡，我必须单击按钮。我不想每次都点击按钮打开标签。

<div><p-accordion >
  <p-accordionTab  header="Add  Detail" >
    <add-details [state]="'addNew'"></add-details>
  </p-accordionTab>
</p-accordion>
</div>

从评论中提取：

open]= true 它不工作未捕获的错误：模板解析错误：无法绑定到“打开”，因为它不是 'p-手风琴标签'。 1. 如果“p-accordionTab”是一个 Angular 组件并且它具有“打开”输入，然后验证它是否是该模块的一部分。 2. 如果 'p-accordionTab' 是一个 Web 组件，然后添加 'CUSTOM_ELEMENTS_SCHEMA' 到此组件的“@NgModule.schemas”以禁止显示此消息。 3. 允许任何属性添加'NO_ERRORS_SCHEMA'到'@NgModule.schemas' 这个组件。 ("<div><p-accordion >

【问题讨论】：

在ngAfterViewInit()生命周期钩子中添加你在按钮点击中所做的任何事情。
无论 xyz 说什么，或者你在你的 PAccordionTabComponent 中添加一个 Input() open 属性，然后用 <p-accordionTab header="Add Detail" [open]="true"> 调用它
我没有任何按钮，它是手风琴按钮..我还没有为此编写任何代码
[open]= true 它不起作用未捕获的错误：模板解析错误：无法绑定到“open”，因为它不是“p-accordionTab”的已知属性。 1. 如果 'p-accordionTab' 是一个 Angular 组件并且它有 'open' 输入，那么验证它是这个模块的一部分。 2. 如果 'p-accordionTab' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以禁止显示此消息。 3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 ("
在stackoverflow.com/q/37092876/125981 对我来说似乎与此重复，但这里的标记有点不同，所以我没有那样投票。

标签： javascript angular accordion

【解决方案1】：

<p-accordion>
    <p-accordionTab header="Header I" [selected]="true">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </p-accordionTab>
    <p-accordionTab header="Header II">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
            architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
            voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
    </p-accordionTab>
    <p-accordionTab header="Header III">
        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                    cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                    Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
    </p-accordionTab>
</p-accordion>

您可以将[selected]="true" 用于您希望默认打开的任何<p-accordionTab> (1)

【讨论】：

这是一个不错的 PrimeNG 手风琴演示，但请在答案中至少包含一个 sn-p 代码，以防链接中断。
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【解决方案2】：

如果您需要默认打开第一个选项卡，则在主父元素中添加activeIndex="0"。在上述情况下，它会是这样的

<p-accordion #accord activeIndex="0">
    <p-accordionTab  header="Add  Detail" >
    <add-details [state]="'addNew'"></add-details>
    </p-accordionTab>
</p-accordion>

注：取自here

【讨论】：

【解决方案3】：

您没有提供足够的代码来提供完整且经过测试的答案，但基本上您想要做的是使用 # 语法 (#accord) 将 ID 应用于手风琴，然后在代码中使用 ViewChild 装饰器提供对该手风琴的变量引用，然后在 OnInit 方法中对该引用调用 open() 方法。

类似这样的：

<div><p-accordion #accord>
  <p-accordionTab  header="Add  Detail" >
    <add-details [state]="'addNew'"></add-details>
  </p-accordionTab>
</p-accordion>
</div>

然后在你的变量定义中：

  @ViewChild('accord')
  private accord: Accordion;

在 OnInit 中：

ngOnInit() {
    this.accord.open();
    // or this.accord.tabs[0].selected = true;
}

我不确定 Accordion 的确切语法 - 我假设您正在使用 PrimeNG Accordion 但是您没有说明，因此很难准确地解决您的问题，但希望这会为您指明正确的方向.

如果你 console.log("this.accord: ",this.accord);您将获得 Accordion 的所有方法和属性，并有望找到您需要用来做您想做的事情的确切方法和属性。

【讨论】：