我试图在ionic 4的app.component中获取当前页面实例。
在离子3中，我可以这样做
this.nav.getActive（）。instance
答案 0 :(得分：0)
在Ionic 4中，使用以下代码使用NavController
import { NavController } from '@ionic/angular';
constructor(public navCtrl: NavController) {
}
ngOnInit() {
console.log(this.navCtrl.router.routerState.snapshot.url)
}
希望这会有所帮助！
答案 1 :(得分：0)
您可以从路由器访问该网址。
import { OnInit } from '@angular/core';
import { Router } from '@angular/router';
export class YourPage implements OnInit {
constructor(private router: Router) {}
ngOnInit() {
console.log('this.router.url', this.router.url);
}
}
答案 2 :(得分：0)
我处于类似情况。在多页应用程序中，我需要当前类组件的 instance 。
基本上，我有一个可以在每个页面上打开的模式，可以询问用户是否要重新加载数据。当用户选择是时，我想访问当前页面实例并在其上调用 reload 方法。
我最终遇到了这个肮脏的把戏。我不是Angular / JS / Ionic专家，所以可能有更好更干净的方法来做到这一点。在我看来，使用此功能需要您自担风险，尽管它并不完美（见下文），但它似乎仍然有效。
我的想法很简单：当实例化一个新的页面组件类（称为构造函数）时，我将其绑定到用于导航到它的URL。
类实例化发生在导航结束之前，所以当导航结束事件发生时，我使用最终的URL来获取实例。
在我的app.component.ts中，我将事件处理程序与对页面组件方法的调用放在一起：
export class AppComponent implements OnInit {
private navEnd: Observable<NavigationEnd>;
constructor(
// ... other dependencies
private router: Router,
private routeMap: RouteMap // this is my class, see later
) {
this.navEnd = router.events.pipe(
filter(event => event instanceof NavigationEnd)
) as Observable<NavigationEnd>;
}
ngOnInit() {
this.navEnd.subscribe(evt => {
let instance = this.routeMap.getObject(evt.urlAfterRedirects);
if (instance != null) {
instance.doStuff();
// ... or save instance elsewhere, like
// this.aService.setCurrentPage(instance);
// or anything you need
}
});
}
}
在subscribe调用中，我使用evt.urlAfterRedirects而不是evt.url来处理空路径重定向到首页的情况，例如app-routing.module.ts ：
const routes: Routes = [
{ path: '', redirectTo: 'categories', pathMatch: 'full' },
{ path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
{ path: 'page1', loadChildren: './pages/page1/page1.module#Page1PageModule' },
// ...
];
如果您具有类似的配置，则在导航/并发生NavigationEnd事件时，evt.url是/，而evt.urlAfterRedirects是{{1} }。
当您导航到/home，然后使用“后退”按钮返回回到主页时，当发生/page1时，NavigationEnd和{{1} }是evt.url。
为确保在两种情况下都能获得实例，我需要使用evt.urlAfterRedirects用户。
在我的页面中，我像这样更改构造函数：
/home基本上，在调用构造函数时，我知道组件类的实例，因此将其绑定到当前URL。
这段代码很粗糙，可能最好将其分解为一个超类，一个装饰器，一个mixin，这样就不必在每个页面上重复代码。由于不是Java语言或Angular专家，我有点迷失了。我会选择一个超类（因为我只知道它们），但是也许其他更好。
urlAfterRedirects代码这是进行跟踪的地方。这是一项小服务，您可以将它放在自己喜欢的地方。
export HomePageComponent implements OnInit {
constructor(
private router: Router,
private routeMap: RouteMap // again my code
) {
routeMap.registerObject(router.getCurrentNavigation().finalUrl.toString(), this);
}
// ...
}
RouteMap首先检查给定的import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class RouteMap {
private map: {
path: string,
object: object
}[] = [];
getObject(path: string) {
let item = this.map.find(function (item) {
return item.path == path;
});
return item ? item.object : null;
}
registerObject(path: string, object: object) {
let item = this.map.find(function (item) {
return item.path == path;
});
if (item) {
item.object = object;
} else {
this.map.push({
path: path,
object: object
});
}
}
}
是否已映射到对象。如果真是这样，它只会更新对象，这样您就不会有重复的路径。否则，它将在地图中添加一个新条目。
registerObject()在地图上搜索给定path，并在路径存在时给出注册对象。否则，它将给出getObject()。
就我而言，我有一系列的页面path，其中最后一个是具有3个标签的页面。
null具有以下路由定义：
Home -> Page1 -> ... -> PageN -> TabbedPage因此，当我导航到TabbedPage时，它会自动打开const routes: Routes = [
{
path: '',
component: TabbedPage,
children: [
{
path: '',
redirectTo: 'tab1',
pathMatch: 'full'
},
{
path: 'tab1',
children: [{
path: '',
loadChildren: './tab1/tab1.module#Tab1Module'
}]
},
{
path: 'tab2',
children: [{
path: '',
loadChildren: './tab2/tab2.module#Tab2Module'
}]
},
{
path: 'tab3',
children: [{
path: '',
loadChildren: './tab3/tab3.module#Tab3Module'
}]
},
]
},
];
标签。
但是，我注意到，如果我尝试使用以下方式跟踪/tabbedpage实例
/tabbedpage/tab1它不起作用：Tab1给了export class Tab1 implements OnInit {
constructor(
private router: Router,
private routeMap: RouteMap
) {
routeMap.registerObject(router.getCurrentNavigation().finalUrl.toString(), this);
}
}
。我记录了导航事件，并且发现没有导航从getCurrentNavigation()到null。 TabbedPage刚刚被实例化。
所以我有以下事件序列：
Tab1 Tab1重定向到找到的/tabbedpage /tabbedpage已创建并绑定到/tabbedpage/tab1 TabbedPage到/tabbedpage/tab1 /tabbedpage已创建此后，如果我浏览其他选项卡，则/tabbedpage/tab1和Tab1的实例已正确绑定到Tab2和Tab3。如果我导航回到/tabbedpage/tab2，则会得到/tabbedpage/tab3的实例。
目前我还没有发现其他特殊问题，但是代码足以满足我的情况。
让我们看看它对您是否也有用。
再见
答案 3 :(得分：0)
u可以使用routeroutlet跟踪当前页面
<router-outlet (activate)="componentName = $event"></router-outlet>
查看文档以获取更多信息 https://angular.io/api/router/RouterOutlet
答案 4 :(得分：0)
我做了这个，对我有用：
ionViewWillEnter() {
console.log(this.router['routerState'].snapshot.url);
}
答案 5 :(得分：0)
在我的情况下，我使用了可观察的方法来解决这种情况
这是我的网址服务
@Injectable({
providedIn: 'root'
})
export class CurrentPageService {
private $urlParts:BehaviorSubject<any>;
private url;
constructor(private router:Router) {
this.$urlParts = new BehaviorSubject(null);
}
get urlParts(){
return this.$urlParts.asObservable();
}
setUrl(){
this.url=this.router.url;
let parts = this.url.split('/');
return this.$urlParts.next(parts);
}
}
以及我有兴趣在我的应用程序组件中获取其当前活动状态的任何页面，我都会触发此可见
export class HomePage {
constructor(private currentPage:CurrentPageService) {
}
ionViewDidEnter(){
this.currentPage.setUrl();
}
最后在我的appcomponent中
export class AppComponent {
urlParts;
constructor(private currentpage:CurrentPageService){
this.currentPage.urlParts.subscribe(url=>this.urlParts=url);
});
}
foo(){
if (!this.urlParts.includes('home')) {
//do something
}
}
}