Profil detayı eklendi, herkes profillerine girip bir gözatsın! Sevdiğiniz üyelerin cevaplarını takip edin! Tüm güncellemeler

Angular Router

Angular'da dropdown ile seçim yaptıktan sonra veriler gösteriliyor. Seçtiğim Şehir ve İlçe url'de görünsün istiyorum seo açısından da. Kodu içeren örneği bırakıyorum. https://stackblitz.com/edit/angular-uzmncvp


home.component.ts'de bulunan router kodu


onCitySelect(city) {
    this.selectedCity = city;
    if (city.down && city.down.length > 0) {
      this.selectedDown = city.down[0];
    } else {
      this.selectedDown = null;
    }
}

onDistrictSelect(district) {
    this.selectedDown = district;
    this.router.navigateByUrl(`city/${this.selectedCity}/${this.selectedDown}`);
}


Router modulleri de core'dan eklendi. Fakat bi türlü url bu düzende olmadı. Nasıl yapabilirim?

3

Cevaplar (3)

İşlem devam ediyor, lütfen bekleyin..
Selim
Doğru Cevap
@Selim
3 ay önce [Güncellendi]

import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';


import { AppComponent } from './app.component';

import { HomeComponent } from './home/home.component';

import { CoreModule } from './core';

import { HomeModule } from './home';

import { RouterModule, Routes } from '@angular/router';


const appRoutes: Routes = [

{ path: '', component: HomeComponent },

{ path: 'city/:city/:down', component: HomeComponent },

];



@NgModule({

bootstrap: [AppComponent],

declarations: [AppComponent],

imports: [

CoreModule,

HomeModule,

RouterModule.forRoot(

appRoutes,

{ enableTracing: true }

)

],

})

export class AppModule {}


app.module.ts kodlarını silip yukarıdakileri yapıştır



<router-outlet></router-outlet>




Yukarıdaki 'router-outlet' app.component.html içindekileri silip yapıştır


import { Component, EventEmitter, Input, Output, ViewChild } from

'@angular/core';

import { Router } from '@angular/router';

declare var jquery:any;

declare var $ :any;

@Component({

selector: 'home',

styleUrls: ['./home.css'],

templateUrl: './home.html',

})

export class HomeComponent {


city:Array = [


{'name':'Adana',

'value':1,

'down':[

{'name':'Seyhan',

'value':1_1,

'places':[

{'name':'01 Merkez',

'pname':'Özel Merkez',

'unvan':'Uzman'

},

{'name':'01 Şube',

'pname':'Özel Şube',

'unvan':'-'

}

]

},

{'name':'Ceyhan',

'value':1_2,

'places':[

{'name':'01_1 Merkez'},

{'name':'01_1 Şube'}

]

}]

},

{'name':'İstanbul',

'value':34,

'down':[

{'name':'Beylikdüzü',

'value':34_1,

'places':

[

{'name':'34 Merkez',

'pname':'Özel Merkez',

'unvan':'Uzman'

},

{'name':'34 Şube',

'pname':'Özel Şube',

'unvan':'-'

}

]},

{'name':'Beşiktaş',

'value':34_2,

'places':[

{'name':'34_2 Merkez'},

{'name':'34_2 Şube'}

]}]

},

{'name':'İzmir',

'value':35,

'down':[

{'name':'Bornova',

'value':35_1,

'places':[

{'name':'35_1 Merkez'},

{'name':'35_1 Şube'}

]},

{'name':'Karşıyaka',

'value':35_2,

'places':[

{'name':'35_2 Merkez'},

{'name':'35_2 Şube'},

{'name':'35_2 Oda'}

]}]

}

];

selectedCity = this.city[0];


selectedDown = this.selectedCity.down[0];


selectedPlaces = this.selectedDown.places[0];

@ViewChild("mott") lab;


constructor(private router: Router) {


}

/*ROUTER KODU*/

onCitySelect(city) {

this.selectedCity = city;

if (city.down && city.down.length > 0) {

this.selectedDown = city.down[0];

} else {

this.selectedDown = null;

}

}


onDistrictSelect(district) {

this.selectedDown = district;

}

/*ROUTER KODU*/

show() {

setTimeout(()=>{

this.showedOption = this.selectedDown;

this.router.navigate(['/city', this.selectedCity.name, this.selectedDown.name]);

},1200);


}


getUrl() {

return "url('http://i.hizliresim.com/7DlRqm.png')";

}



}


Son olarak yukarıdaki kodu kendi kondlarını silip home.component.ts e yapıştır. İstediğin şekilde çalışacaktır. Senin örneğini düzenleyip yaptım. Bende çalıştı. Kayıt edemediğim için bu şekilde yazdım
Cevapla @Selim3 ay önce
Galiba kaydettim. Yukarıdaki kodları anlayamazsan buradan bakabilirsin => https://stackblitz.com/edit/angular-uzmncvp-eye6bd?file=app%2Fhome%2Fhome.component.ts
Cevapla @ucnumara3 ay önce
@Selim, Çok teşekkür ederim
İşlem devam ediyor, lütfen bekleyin..
Selim
@Selim
3 ay önce [Güncellendi]

Routing kullanarak yapabilirsin. Bir araştır yapamazsan => https://www.youtube.com/watch?v=CFYZXgwBA1E bu videoya bakabilirsin. Yine olmazsa tekrar yazarsan ben bir örnek yapmaya çalışırım

Cevapla @ucnumara3 ay önce
@Selim, Hocam menüde veya listeli verilerde routing yapmamda sıkıntı yok. Örnek olarak https://www.doktortakvimi.com var. Doktor ve İstanbul seçtiğimde https://www.doktortakvimi.com/yer/istanbul/doktor olarak url veriyor. Ben de bu uygulamada İl ve ilçe seçtiğimde aynısını yapmak istiyorum ama hiç örnek bulamadım.
İşlem devam ediyor, lütfen bekleyin..
Mustafa Acar
@ngjavacs
3 ay önce [Güncellendi]

Linkteki kodunu inceledim. Öncelikle bir mantık hatası olduğunu belirtmeliyim. Selim arkadaşın da dediği gibi Angular uygulamalarında routing işlemleri RouterModule üzerinden yapılır. Bir route belirlenir, bu route çağırıldığında hangi component'in çalıştırılacağı belirtilir, eğer url'de parametreler kullanmak istiyorsan path parametresinin sonuna :parameter olarak eklersin. Bunlarda yine RouterModule üzerinden yapılır.


imports: [
   BrowserModule,
   BrowserAnimationsModule,
   HttpClientModule,

   RouterModule.forRoot([
      {path: 'location', component: LocationComponent},
      {path: 'location/:city', component: LocationComponent},
      {path: 'location/:city/:town', component: LocationComponent},
   ])

],


böyle bir routing module oluşturman gerekiyor.


Ek olarak Angular'ı diğer dillerle karıştırmamalısın. Angular ile SEO friendly bir uygulama yazamazsın. Sen istediğin kadar SEO friendly linkler oluştur, Google'ın sayfana girdiğinde göreceği sadece

<router-outlet></router-outlet>'tir.. Ama herşeye rağmen benim için candır!... :)


Küçük bir tavsiye olarak kabul edersen, Angular'ı SEO gerekli web sitesi tasarlarken kullanma derim. Mesela bir haber sitesi kuracaksan bu baştan aşağı SEO ister. Ama webde üyelik sistemi ile çalışan bir uygulama yazacaksan o zaman kullanabilirsin. Sonuçta üye bilgilerinin de indexlenmesinin de önüne geçmiş olursun. Ama bu uygulamanın bir de tanıtım sayfası olacaksa o zaman yine Angular'dan kaç, klasik yollarla çözüme git derim.. En azından ben böyle yapıyorum...


Bol Angular'lı günler...

Cevapla @ucnumara3 ay önce
Hocam module de oluşturdum component de ekledim nerede mantık hatası yapıyorum bulamadım console da hatayı basmıyor bir türlü bulamıyorum olmuyor örneği dediğiniz gibi yaptım-> https://stackblitz.com/edit/angular-uzmncvp
İşlem devam ediyor, lütfen bekleyin..

Cevap yaz Sadece sorunun cevabını yazın