如何使用Angular 6中的UI路由器在同一父类中从一个组件导航到另一个组件？

Question

角度UI路由器可视化器

design.component.ts

import { Component, OnInit, ChangeDetectorRef, EventEmitter, Output, Input } from '@angular/core';
import { AppService } from '@app/shared/app.service';
import { Schema } from '@app/shared/model/app.modal';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { StateService } from '@uirouter/core';

@Component({
  selector: 'app-design-app',
  templateUrl: './design-app.component.html',
  styleUrls: ['./design-app.component.scss']
})
export class DesignAppComponent implements OnInit {
  schema: Schema=new Schema(); 
  fields: object[] = this.appService.fields;
  mobileQuery: MediaQueryList;
  isScrolled: boolean;
  constructor(private appService: AppService, private $state: StateService) {
  }

  sideNavScrollControl() {
    window.onscroll = () => {
      if (document.body.scrollTop > 140 || document.documentElement.scrollTop > 140) {
        this.isScrolled = true;
      } else {
        this.isScrolled = false;
      }
    };
  }

  previewPublish(){
    this.$state.go('login');
  }

  ngOnInit() {
  }

}

design.component.html

<!-- Preview, workflow and more actions button starts -->
<div class="preview-workflow-btn">
    <button mat-raised-button type="button" class="more-actions-btn" [matMenuTriggerFor]="menu">More Actions<i class="fa fa-sort-down dropdown-icon"></i></button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Basic Details</button>
      <button mat-menu-item>Settings</button>
      <button mat-menu-item>Acceptance</button>
    </mat-menu>
  <button mat-raised-button type="button" class="workflow-btn">Workflow</button>
  <button mat-raised-button type="button" class="preview-btn" (click)="previewPublish">Preview</button>
</div>
<!-- Preview, workflow and more actions button ends -->

<div class="draggable-block-section" fxFlex="100" fxLayout="column">

<!-- Left form fields panel starts -->
  <div class="left-panel" fxFlex="50">
    <app-draggable [config]="fields"></app-draggable>
  </div>
<!-- Left form fields panel ends -->

<!-- Right panel starts -->
  <div class="right-panel" fxFlex="50">
    <app-blocks [config]="schema"></app-blocks>
  </div>
<!-- Right panel ends -->

</div>

问题：现在，在单击上面的html文件中提到的“预览按钮”时，如何重定向到预览-发布->水平。 请帮忙。 点击功能不起作用。 默认情况下，要进行发布预览时应查看“水平”。

Answer 1

在HTML页面中，您只能像这样使用

 <div class="row directional-row">
    <a routerLink="/landing-page" title="Back">
      <i class="zmdi zmdi-arrow-left back_nav"></i>Back</a>
  </div>

Answer 2

<button mat-raised-button type="button" uiSref="preview-publish">Preview</button>

默认情况下，在其路由中，我们将重定向到水平，如下所示：

states: [
    {
      parent: "app-builder",
      name: "preview-publish",
      redirectTo: "horizontal",
      url: "/preview-publish",
      component: PreviewPublishComponent
    },
    {
      parent: "preview-publish",
      name: "horizontal",
      url: "/horizontal",
      component: HorizontalComponent
    },
    {
      parent: "preview-publish",
      name: "vertical",
      url: "/vertical",
      component: VerticalComponent
    },

  ],