en en en da en en sv en da et fr en fr zh en en en da hbs_lat en sv fr de de en hbs_lat hbs_lat az yue da da sv en en en sv fr de de fr fr fr sv en fr en ja fr de fr en en tr en en en en en mn en en en en en kn kn id en en en en da en en en da en en en en da en en sv fr de de fr fr fr sv en fr en ja fr eo en en en en en en en kn en en kn en kn da en en sv fr de de fr fr fr sv en fr en ja fr de fr es nb tr en en en en en en kn en en en en en en es kn kn en en da da sv da da sv da nb nb en da da da da en nl da sv da en
Angular 6 navigering: Responsive menu – en sidebar – NerdGirl
Forbud fører sjældent noget godt med sig
(Last Updated On: 27. juni 2018)
$ npm install --save ng-sidebar
import { SidebarModule } from 'ng-sidebar';
… og i imports sektionen af samme fil:
imports: [   BrowserModule,   ...   SidebarModule.forRoot() ]
I dokumentationen er brugen af modulet tydeligt forklaret, men som ny bruger af Angular 6, havde jeg lidt udfordringer med at finde ud af, hvordan man åbner og lukker det uden for det komponent hvor det er tilføjet.
Jeg løste det ved at oprette en service som andre komponenter kan kalde. Sidebar komponentet lytter så til denne service og sørger for at åbne og lukke menuen.
Min service ser således ud:
import { Injectable, Output, EventEmitter } from '@angular/core'; @Injectable({providedIn: 'root'}) eksport class MainMenuService { isOpen = false; @Output() change:EventEmitter = new EventEmitter(); toggle() { console.log('toggle in service called'); this.isOpen = !this.isOpen; //Alert subscribers about te change console.log('passing '+this.isOpen+' to subscriber') this.change.emit(this.isOpen); } }
import { Injectable, Output, EventEmitter } from '@angular/core';
eksport class MainMenuService {
@Output() change:EventEmitter = new EventEmitter();
console.log('toggle in service called');
//Alert subscribers about te change
console.log('passing '+this.isOpen+' to subscriber')
import { MainMenuService } from './_service/main-menu.service';
import { MainMenuService } from './_service/main-menu.service';
og samme fil i providers:
I det komponent der skal kunne åbne og lukke menuen:
import { MainMenuService } from '../../_service/main-menu.service';
import { MainMenuService } from '../../_service/main-menu.service';
og i den tilhørende klasse opretter vi en lille funktion der kommunikerer med vores service. Denne funktion kaldes i en click-event på et html element i samme komponent:
eksport class EtKomponent implements OnInit { constructor(private mainMenuService:MainMenuService) { } public toggleSidebar() { //Tell te sidebar menu service to //change its value. this.mainMenuService.toggle(); } ngOnInit() { } }
eksport class EtKomponent implements OnInit {
constructor(private mainMenuService:MainMenuService) { }
//Tell te sidebar menu service to
…og i det komponent der indeholder vores sidebar skal vores service også importeres som vist herover, og derudover sætter vi den til at lytte til vores service:
eksport class EtKomponentMedSidebar implements OnInit { //Template variable to open/close te sidebar menu public _opened: boolean = false; constructor(private mainMenuService: MainMenuService) { } public toggle() { this.mainMenuService.toggle(); } ngOnInit() { //Subscribe to changes on `isOpen` from sidebar menu service this.mainMenuService.change.subscribe(isOpen => { //Set te template variable accordingly to open/close te menu this._opened = isOpen; }) } }
eksport class EtKomponentMedSidebar implements OnInit {
//Template variable to open/close te sidebar menu
public _opened: boolean = false;
constructor(private mainMenuService: MainMenuService) { }
//Subscribe to changes on `isOpen` from sidebar menu service
//Set te template variable accordingly to open/close te menu
Posted in Webudvikling Tagged angular 6, ng-sidebar, service
Angular i18n: Oversættelse til flere sprog
Angular 6 http: Kommunikation med api
I gang med Angular 13 på Linux
Brug af grep kommandoen
Installer Asbru Connection Manager på Fedora
Installer DBeaver på Fedora
Node Package Manager (npm)
Linux: Afvikle en kommando som en anden bruger
MariaDB: Slå generel log til midlertidigt
Udskift nouveau driver med NVIDIA på Fedora 33 – og fortryd
Skab overblik over dine DMARC rapporter
Kategorier Vælg kategori Aftensmad Akrylmaling Bagværk Computer Dessert Fotografi Generelt Grød Hakket oksekød Hobby Hvidkål Ikke kategoriseret Internet IT Krop og sind PHP Pizza Politik Samfund Server Tips & Tricks Vegansk Webudvikling
Arkiver Vælg måned august 2022 april 2022 marts 2022 oktober 2021 maj 2021 marts 2021 februar 2021 januar 2021 december 2020 november 2020 oktober 2020 august 2020 juli 2020 juni 2020 marts 2020 januar 2020 december 2019 november 2019 oktober 2019 august 2019 juni 2019 april 2019 februar 2019 december 2018 oktober 2018 september 2018 juli 2018 juni 2018 maj 2018 april 2018 februar 2018 januar 2018 december 2017 oktober 2017 september 2017 august 2017 juli 2017 juni 2017 maj 2017 april 2017 januar 2017 december 2016 november 2016 oktober 2016 september 2016 januar 2016 december 2015 november 2015 oktober 2015 september 2015
Proudly powered by WordPress | Theme: chichi by xtianmark.