|
|
Yayınlandı 25.10.2018 15:52:29
|
|
|
RouterLink Komutlarına Giriş
RouterLink komutu, uygulamanızın belirli bir bölümüne bağlantı kurmanızı sağlar. Bağlantı statikse, komutu şu şekilde kullanabiliriz:
Dinamik değerlerle bağlantı adresleri oluşturmanız gerekiyorsa, bir yol segmenti dizisi ve ardından her segment için parametreleri iletebilirsiniz. Örneğin, ['/team', teamId, 'user', userName, {details: true}] dizisi kullanmak, /team/11/user/bob bağlantısı oluşturmak istediğimiz anlamına gelir; details=true 。
Birden fazla statik segment tek bir parçaya birleştirilebilir, örneğin ['/team/11/user', userName, {details: true}].
İlk yol parçası /, ./ veya olarak tanımlanabilir. / Başlangıç:
- Eğer / ile başlarsa, rota kök yoldan yukarıya bakmaya başlar
- ./ ile başlarsa veya kullanılmazsa, rota şu anda rota için aktif olan alt rotadan yukarıya bakmaya başlar
- Başlarsanız: / başlarsa, yol bir sonraki arama seviyesine geçer
Sorgu parametrelerini ve parçalarını aşağıdaki şekillerde ayarlayabilirsiniz:
RouterLink komutu, yukarıda belirlenen giriş parametrelerine göre aşağıdaki bağlantıyı oluşturur: /user/bob#education?debug=true. Ayrıca, queryParamsHandling özelliği üzerinden sorgu parametrelerinin nasıl işleneceğini açıklayabiliriz, mevcut seçenekler şunlardır:
- merge - Mevcut queryParams'ları mevcut queryParams ile birleştir
- preserve - Güncel sorguParam'ları kaydet
- default ('') - Sadece sorgu parametreleri kullanın
Özel kullanım örnekleri şunlardır:
RouterLink komutu detaylı olarak açıklandı
RouterLink komut tanımı
RouterLink komut giriş özelliği
URL ile ilgili sorgu parametrelerini ayarlayın
@Input() queryParams: {[k: string]: herhangi biri};
Hash parçasını URL'de ayarlayın
@Input() parçası: ip;
Sorgu parametresi işleme modunu ayarlayın: birleştirme, koruma ve varsayılan
@Input() queryParamsHandling: QueryParamsHandling;
Parçaların tutulup tutulmaması ayarlar
@Input() korumaParça: boolean;
Sayfa gezintisi ayarlarken, geçmişe yeni durum ekleyip eklemeyeceğinize karar verin.
@Input() skiplocatio{filter}nChange: boolean;
Sayfa navigasyonunu ayarlarken, geçmişteki mevcut durumun değiştirilip değiştirilmediği
@Input() replaceUrl: boolean;
Parametre bilgilerini komut ayarlar, örneğin: ['/user/bob']
@Input()
set routerLink(komutlar: any[]|string) {
if (komutlar != null) {
this.commands = Array.isArray komutları ? komutlar : [komutlar];
} else {
this.commands = [];
}
}
RouterLink komut bağlaması
Olay bağlama
RouterLink sınıfı
@Attribute()
@Attribute('attributeName') dekoratör: Komut ana öğesinde attributeName özellik adına karşılık gelen özellik değerini elde etmek için kullanılır.
tabindex
Tabindex özelliği, bir elemanın tab anahtarı kontrol sırasını belirtir (sekme tuşu navigasyon için kullanılırsa).
Aşağıdaki unsurlar tabindex niteliklerini destekler: <a>, <area>, <button>, <input><object><select> , ve <textarea> .
tabindex sözdizimi:
RouterLink sınıfı
RouterLink sınıfı
RouterLinkWithHref komutu
RouterLinkWithHref direktifi
RouterLinkWithHref direktif giriş özelliği
RouterLinkWithHref komutu
öznitelik bağlama
<a> Etiketler, bir sayfadan diğerine bağlantı vermek için kullanılan hiperlinkleri tanımlar. <a> Etiketlerde iki önemli özellik vardır:
href - bağlantının götürüleceği sayfanın URL adresini belirtir. Href özniteliğini kullanmıyorsanız, aşağıdaki nitelikleri kullanamazsınız: download, media, rel, target ve type attributes.
hedef - bağlantılı sayfanın tarayıcı penceresinde nasıl açıldığını belirtir ve parametre değerleri esas olarak şu şekildedir:
_blank - Hedef belgeyi yeni bir tarayıcı penceresine yükleyin.
_parent - Bu hedef, belgenin hiperlinkte referans verilen çerçeveyi içeren ana pencereye veya çerçeve setine yüklenmesine neden olur. Eğer bu referans bir pencerede veya üst düzey bir çerçevedeyse, hedef _self eşdeğerdir.
_self - Bu hedefin değeri, hedef belirtmeyen tüm etiketler için varsayılan <a> hedeftir; bu da hedef belgenin aynı çerçeve veya pencerede kaynak belge olarak yüklenip gösterilmesine neden olur. Bu hedef, <base> belge başlığı sekmesindeki hedef özniteliğiyle kullanılmadıkça gereksiz ve gereksizdir.
_top - Bu hedef, belgenin hiperlinki içeren pencereyi yüklemesine neden olur ve _top hedefi kullanılarak tüm dahil edilen çerçeveler temizlenir ve belge tüm tarayıcı penceresinde yüklenir.
Olay bağlama
MouseEvent, bir kullanıcının bir işaret cihazı (örneğin fare) ile etkileşime girdiğinde gerçekleşen bir olayı temsil eder ve yaygın olaylar arasında: click, dblclick, mouseup ve mousedown olayları bulunur. MouseEvent nesnesi, kullanıcının bastığı fare düğmesini temsil eden bir düğme özniteliği içerir ve olası öznitelik değerleri şunlardır:
- 0 - Ana düğmeye basılır, genellikle sol fare düğmesine atıfta bulunur.
- 1 - Yardımcı düğmeye basılır, genellikle fare tekerleğine atıfta bulunur.
- 2 - İkinci tuşa basılır, genellikle sağ fare düğmesine atıfta bulunur.
- 3 - Dördüncü düğmeye basılır, genellikle tarayıcı geri düğmesine atıfta bulunur.
- 4 - Beşinci düğmeye basılır, genellikle tarayıcının ileri düğmesine atıfta bulunur.
Sol el kullanımına uygun bir farede ise tuş basmaları tam tersi olur. Bu durumda, değer sağdan sola okunur. Yukarıdaki örnek kodda, MouseEvent nesnesinin ctrlKey ve metaKey özelliklerine de erişiyoruz; bunlar altKey ve shiftKey özelliklerini de içerir; bu iki özellikle birlikte altKey ve shiftKey özelliklerini içerir. Bu özellikler aşağıda açıklanmıştır:
- MouseEvent.ctrlKey - fare olayı tetiklendiğinde kontrol tuşuna basılırsa true döner.
- MouseEvent.metaKey - fare etkinliği tetiklendiğinde (Window - ⊞, Mac - ⌘ Komut) tuşu basılırsa doğru döner.
- MouseEvent.altKey - Fare etkinliği tetiklendiğinde (Window - alt, Mac - Option veya ⌥) tuşuna basılırsa true döner.
- MouseEvent.shiftKey - Fare etkinliği tetiklendiğinde shift tuşuna basılırsa true döner.
CtrlKey'e basıp sekmeye tıklarsanız, <a> mevcut URL adresiyle yeni bir sekme sayfası oluşturulur. MetaKey'e basıp <a> sekmeye tıklarsanız, mevcut sayfa yenilenir. Bu nedenle, onClick() yönteminde karşılık gelen yargı yapılır.
RouterLinkWithHref komut yaşam döngüsü
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref sınıfı
RouterLinkWithHref sınıfı
RouterLinkWithHref sınıfı
RouterLinkActive komutuna Giriş
RouterLinkActive direktifi, bağlantılı rota aktif olduğunda bir öğeye CSS sınıfları eklemenizi sağlar. Aşağıdaki örneğe bir göz atın:
URL adresi /user veya /user/bob olduğunda, aktif bağlantı sınıfı <a> etikete eklenecektir. URL değişirse, aktif bağlantı sınıfı otomatik olarak <a> etiketten kaldırılır. Ayrıca aynı anda birden fazla sınıf ekleyebilirsiniz, aşağıdaki gibi:
routerLinkActive komutunu uygularken, URL'lerin nasıl eşleştiğini yapılandırmak için routerLinkActiveOptions parametresini de kullanabilirsiniz, aşağıdaki gibi:
{exact: true} parametresi yapılandırıldığında, aktif bağlantı sınıfı yalnızca URL adresi tam olarak <a> eşleşiyorsa etikete eklenir. Ayrıca bir RouterLinkActive örneğini bir şablon değişkenine atayıp, komut direktiflerinin isActive durumunu direktif olarak kontrol edebilirsiniz:
Son olarak, RouterLinkActive komutunu RouterLink'in ana öğesine de uygulayabilirsiniz. Örnekler şunlardır:
Yukarıdaki örnekte, URL /user/jim veya /user/bob olarak adreslendiğinde, aktif bağlantı <div> sınıfı ilgili öğeye eklenir.
RouterLinkActive komutu detaylı açıklandı
RouterLinkActive komut tanımı
RouterLinkActive komut girişi özelliği
RouterLinkActive komut yaşam döngüsü
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive sınıfı
RouterLinkActive sınıfı
RouterLinkActive sınıfı
|
Önceki:Burada gerçekten iyi bir fonksiyon var, para kazanabilirsiniz, o da tanıtım.Önümüzdeki:Kişisel test için mevcut olan DZ çevrimiçi ödeme sözleşmesiz bir eklenti yayımladı.
|
