Base solution for your next web application
Open Closed

Angular 7 Dynamic Side Bar Menu Problem #7030


User avatar
0
globalbilgi created

Merhaba,

.Net Core & Angular projesinde sol menüyü dinamik hale getirmek istiyorum. Gerekli servisleri .net ve angular tarafında yazdım ve SideBarMenuComponent 'inde menu:AppMenu değişkenini :

this._appNavigationService.GetUserMenu().subscribe(res => { this.menu = res; console.log("res,appmenu this.menu", res, this.menu); });

Yukarıdaki gibi set ediyorum fakat sayfa load olana kadar 74 kere aşağıdaki gibi menu items bulunamadı hatası veriyor. Bende bunu çözmek için ngif="menu" yapıyorum bu seferde sol menu hiç dolmuyor. Sadece mouse ile üzerine geldiğimde doluyor.

Bu sorunu çözmek için ne yapmalıyım ?


8 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Merhaba,

    Peki son durumda "ngIf" kullandığınızda console'a herhangi bir log yazılıyor mu ?

  • User Avatar
    0
    globalbilgi created

    Hayır, sadece mouse ile sol menu üzerine geldiğimde menu yu tetikleyip dolduruyor diğer turkü arkada menu içeriğini ne kadar değiştirirsem değiştireyim ekrana yansımıyor. Neyin engellediğini bir türlü bulamadık.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Merhaba,

    Menu'yü alan kodu ngAfterViewInit içerisine alıp, onun subscribe kısmına da setTimeout kodunu taşıyabilir misiniz ?

  • User Avatar
    0
    globalbilgi created
      ngAfterViewInit(): void {
            this._appNavigationService.GetUserMenu().pipe(finalize(() => setTimeout(() => {
                this.layoutRefService.addElement('asideLeft', this.el.nativeElement);
            })))
                .subscribe(res => {
                    this.menu = res;
                });
        }
    
    yukarıdaki gibi ya da direkt olarak subscribe içerisine menuyu set ettikten sonra setTimeout konudu çalıştrdım ama bir fark olmadı. Html tarafta ngif kullandığımda hiç bir şekilde tetiklemiyor. Ngif kullanmadığımdada sürekli hata veriyor menu items null olduğu için.
    
  • User Avatar
    0
    globalbilgi created
      this._appNavigationService.GetUserMenu()
                .subscribe(res => {
                    this.menu = res;
                    setTimeout(() => {
                        this.layoutRefService.addElement('asideLeft', this.el.nativeElement);
                    });
                });
    

    Bu şekilde de bir fark olmadı maalesef.

  • User Avatar
    0
    globalbilgi created

    Merhaba, Bu sorunu hala çözemedik.

    İyi çalışmalar.

  • User Avatar
    1
    ismcagdas created
    Support Team

    Merhaba,

    Gecikme için özür dileriz, biz de daha önce bu şekilde bir kullanım denemediğimiz için biraz zamanımızı aldı çözümü bulmak.

    Çözüm olarak side-bar-menu.component.ts içerisinde changeDetection: ChangeDetectionStrategy.OnPush kısmını changeDetection: ChangeDetectionStrategy.Default olarak değiştirebilirsiniz. Bu kısmı nasıl olduysa gözden kaçırmışız.

    Sayfanın ilk açılışında hata almamak için de menu tanımını aşağıdaki gibi değiştirebilirsiniz:

    menu: AppMenu = new AppMenu('', '', []);

  • User Avatar
    0
    globalbilgi created

    Merhaba,

    ChangeDetectionStrategy.Default olarak yaptığımızda sorun düzeldi.

    Teşekkürler