Question

我有一个带有登录表单的页面。此表单由两个选项卡分隔。在页脚中，我有一个链接，该链接应将用户定向到此页面，此表单但在第二个选项卡上。我尝试了什么？

我尝试访问#id，但是由于表格是mat-tab并且ng-template mat-tab-label不知道这种语法，所以我知道了。因此，解决方案必须是一些mat选项卡菜单方法。我可以创建这样的方法，因为它们是网络中的很多示例。但是当我单击链接时，我不知道如何调用该方法。这是我在HTML上的代码。

   <div class="reg-form-wrapper">
  <div class="form-viewer">
    <mat-tab-group>
      <mat-tab style="height:500px;">
        <ng-template mat-tab-label>
          <div class="loginHead" class="mat-body-2">Customer login</div>
          <div id="customerLogin"> I want to buy an app</div>
        </ng-template>

        <form>
          <app-mutual-login [userRole]='"customer"'>
          </app-mutual-login>
          <div class="signup-linkcustomer">
              Don't have an account?
              <a routerLink="/auth/register">
                Sign up
              </a>
            </div>
          <div class="separator">
            <h2 class="options"><span class="mat-body-1">or</span></h2>
          </div>

          <div class="button-container">
            <button mat-raised-button color="primary" id="linkdin-btn" type="submit">LinkedIn</button>
            <button mat-raised-button color="primary" id="google-btn" routerLink="/auth/login">google</button>
          </div>
        </form>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <div class="loginHead" id="loginPartner" class="mat-body-2">Partner login</div>
          <div id="customerLogin"> I want to sell an app</div>
        </ng-template>
        <form>
        <app-mutual-login [userRole]='"partner"'>
        </app-mutual-login>
        <div class="signup-linkpartner">
            Don't have an account?
            <a routerLink="/auth/registerpartneroptions">
              Sign up
            </a>
          </div>
          <div id="partnerLoginfooter"></div>
      </form>
      </mat-tab>

    </mat-tab-group>
  </div>
</div>

并且我必须在页脚处调用链接，该链接看起来类似于href =“ / auth / login”，到目前为止，它已以表格的形式转到此页面。有谁有任何想法可以帮助我或给予提示。我真的很感激

一个类似的例子是example，但是我想在单击链接时进行更改。

页脚部分：

    <div class="col">
  <div class="footer-link-title">Partner Zone
  </div>
  <ul>
    <li><a href="">Register an app</a></li>
    <li><a href="/auth/login">Partner Login</a></li>
  </ul>
</div>

...。我需要调用第二个选项卡的时间是在“合作伙伴登录”上。

Answer 1

简化问题描述：

进行客户登录时，默认情况下需要选择索引为0的标签
进行合作伙伴登录时，默认情况下需要选择索引为1的标签页

因此，更改的信息的关键是制表符索引，它是一个简单的整数属性。您可以通过指定URL参数（？tab = 1）并读出该参数，以老式的丑陋方式进行操作。或者...

您可以为同一组件定义两条路由，然后在该路由中配置选项卡的索引以显示：

const routes: Routes = [
    {
        path: 'auth/login', // default customer login
        component: LoginComponent,
        data: {
            tab:0
        }
    },
    {
        path: 'auth/login/partner', // login for partners
        component: LoginComponent,
        data: {
            tab:1
        }
    }
];

然后在登录组件中，您可以读出tab的值并激活该tab。

constructor(private route:ActivatedRoute)

ngOnInit() {
    const selectedTab = this.route.snapshot.data.tab;

    // activate tab with this index through material API
    // (or perhaps passing it to the mat-tab-group selectedIndex property in the html template is enough)
}

然后在页脚中，您可以链接到/ auth / login / partner以显示登录页面，默认情况下已激活“合作伙伴”标签。

此答案主要基于此existing question and answer。

如何将用户定向到页面的特定部分？

1 个答案: