Question

我有一个菜单栏，其中包含从 express api 加载的菜单列表，每个菜单都引用一个页面，该页面具有别名，该别名将是该页面的URL 我正在尝试加载页面，当我点击菜单，它已完成，但只有当我刷新页面这是我的菜单代码

<div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar"  style="background-color: #97455f">
        <div class="navv">
            <ul *ngFor="let menu of menus">
                <li class="col-lg-1 col-md-1 col-xs-12 col-sm-12"><a [routerLink]="[menu.page.alias]">{{menu.title}}</a></li>


            </ul>
        </div>
    </div>

</div><!-- /.navbar-collapse -->

}

这是我的模板菜单

    @Component({
    selector: 'page',
    templateUrl: './page.component.html'
})
export class PageComponent implements OnInit {
    alias: string;
    page:Page;

    constructor(private router:Router,
                private route: ActivatedRoute,
                private pageService:PageService) {

        this.route.params.subscribe(
            (params : Params) => {
                this.alias = params["alias"];
                console.log(this.alias)
            }
        );
    }




    ngOnInit():void {
        debugger;
        this.pageService.getPage(this.alias).subscribe(page => {
            this.page = page;
            console.log(this.page);
        });
    }

}

我认为问题出在我的页面组件的ngOnInit中，它不是名为

    <p *ngIf="page" [innerHTML]="page.content" ></p>

这是我的页面模板

const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: ':alias', component: PageComponent },
    { path: 'archived',  component: ArchivedComponent },
    { path: 'home',  component: HomeComponent },
    { path: 'menu',  component: MenuList },
    { path: 'detail/:id', component: ActualiteDetailComponent },
    { path: 'contact',  component: ContactComponent },

];

@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

这是我的应用路由代码

@Component({
  selector: 'my-app',
  template: `
    <menu-list></menu-list>
    <hr>
`

})
export class AppComponent {

}

这是我的应用程序组件

try/except

Home of application with the menu bar

Answer 1

以下是Gunter所谈论的代码示例：

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
     this.route.params.subscribe(
     params => {
        let id= +params['id'];
        this.getProduct(id);
     });
  }

此代码监视参数的更改并执行箭头函数内的任何代码。

Answer 2

当只有路由器参数发生变化但路由的基础保持不变时，Angular会重用该组件。 ngOnInit()仅在实例化组件后调用一次，但在路由更改时不调用。

您可以注入路由器并订阅它的事件或参数以获得有关路由更改的通知。

Answer 3

很好，感谢@GünterZöchbauer和@DeborahK 我从这个

更改了页面组件代码

public void composeMmsMessage(String message, Uri attachment) {
  Intent intent = new Intent(Intent.ACTION_SENDTO);
  intent.setType(HTTP.PLAIN_TEXT_TYPE);
  intent.putExtra("sms_body", message);
  intent.putExtra(Intent.EXTRA_STREAM, attachment);
  if (intent.resolveActivity(getPackageManager()) != null) {
      startActivity(intent);
  }
}

到这个

@Component({
selector: 'page',
templateUrl: './page.component.html'
    })
    export class PageComponent implements OnInit {
        alias: string;
        page:Page;

        constructor(private router:Router,
                    private route: ActivatedRoute,
                    private pageService:PageService) {

            this.route.params.subscribe(
                (params : Params) => {
                    this.alias = params["alias"];
                    console.log(this.alias)
                }
            );
        }

    ngOnInit():void {
            debugger;
            this.pageService.getPage(this.alias).subscribe(page => {
                this.page = page;
                console.log(this.page);
            });
        }
    }

当routerlink改变时，不会调用Angular 2 ngOnInit

3 个答案: