如何使用 Angular 6 中的 UI 路由器从同一父项 class 中的一个组件导航到其他组件?
How do I navigate from one component to other in the same parent class using UI router in Angular 6?
Angular UI-Router Visualizer
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 文件中提到的 'Preview button' 时重定向到预览发布 -> 水平。请帮忙。点击功能不工作。关于默认发布预览 'horizontal' 应该查看。
在HTML页面你就这样使用
<div class="row directional-row">
<a routerLink="/landing-page" title="Back">
<i class="zmdi zmdi-arrow-left back_nav"></i>Back</a>
</div>
<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
},
],
Angular UI-Router Visualizer
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 文件中提到的 'Preview button' 时重定向到预览发布 -> 水平。请帮忙。点击功能不工作。关于默认发布预览 'horizontal' 应该查看。
在HTML页面你就这样使用
<div class="row directional-row">
<a routerLink="/landing-page" title="Back">
<i class="zmdi zmdi-arrow-left back_nav"></i>Back</a>
</div>
<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
},
],