Bir bileşen, bir Angular uygulamasının en önemli yapı taşlarından biridir. Bileşenler, web sitenizin belirli bölümlerini oluşturan yeniden kullanılabilir kod parçalarıdır.

Oluşturabileceğiniz bileşen örnekleri, düğmeler veya kartlar gibi daha küçük kullanıcı arabirimi öğelerini içerir. Ayrıca kenar çubukları, gezinme çubukları veya tüm sayfalar gibi daha büyük UI öğelerini de içerebilirler.

Bileşenleri Açısal Olarak Kullanma

Bir Angular uygulamasında bileşenler oluşturduğunuzda, bunları diğer bileşenler içinde kullanabilirsiniz. Örneğin, büyük bir UI kartı öğesi için bir bileşen oluşturabilirsiniz. Daha sonra bu bileşeni istediğiniz yerde normal bir HTML etiketi olarak kullanabilirsiniz:

<uygulama-yeni-bileşen></app-new-component>

Bileşenler yeniden kullanılabilir kod bitleri olduğundan, her örnek için verilerin farklı olması için değişkenleri de iletebilirsiniz. Ayrıca sayfalar için bileşenler oluşturabilir ve bunlara uygun olarak aşağıdakileri kullanarak yönlendirebilirsiniz: app-routing.module.ts dosya.

instagram viewer

Bileşenlerinizi, uygulamanızın yapısına ve işlevselliğinizi ne kadar ayırmak istediğinize göre tasarlayabilirsiniz.

Bileşen Nasıl Oluşturulur

kullanabilirsiniz ngkomut oluştur Yeni bir bileşen oluşturmak için.

  1. Yeni bir tane oluştur açısal uygulama kullanarak yeni veya mevcut bir tane açın.
  2. Komut istemini veya terminali açın. Alternatif olarak, Angular uygulamanızı bir Visual Studio Code gibi IDE, yerleşik terminali kullanabilirsiniz.
  3. Terminalde, projenin kök klasörünün konumuna gidin. Örneğin:
    CD C:\Kullanıcılar\Sharl\Desktop\Angular-Application
  4. Çalıştır bileşen oluşturmak komutu, ardından yeni bileşenin adı:
    bileşen kullanıcı arabirimi kartı oluşturma
  5. Yeni bileşen, içinde yeni bir klasörde oluşturulacaktır. kaynak/uygulama dizin.

Açısal Bileşene Nasıl İçerik Eklenir?

Angular, her bileşeni bir HTML, CSS, TypeScript ve Test Spesifikasyonu dosyasıyla oluşturur.

  • bu HTML dosyası bileşenin HTML içeriğini saklar.
  • bu CSS dosyası bileşenin stilini saklar.
  • bu Test Spesifikasyonu (spec.ts) dosyası bileşen için tüm birim testleri saklar.
  • bu TypeScript dosyası bileşeni tanımlayan mantığı ve işlevselliği saklar.

Özel kullanıcı arabirimi kartı bileşenine biraz içerik ekleyin.

  1. Açık src/app/ui-card/ui-card.component.htmlve bileşenin HTML'sini güncelleyin. adlı bir klasörde aynı adı kullanan bir görüntünüz olduğundan emin olun. kaynak/varlıklar/görüntüler Açısal uygulamanızda. içeriğini değiştir ui-card.component.html Takip ederek:
    <div sınıfı="kart">
    <resim kaynağı ="./assets/images/blue-mountains.jpg" alt="avatar">
    <div sınıfı="konteyner">
    <h4 sınıfı="Başlık"> Mavi Dağlar </h4>
    <p> NSW, Avustralya </p>
    </div>
    </div>
  2. Açık ui-card.component.cssve bileşene CSS içeriği ekleyin:
    .kart {
    kutu-gölge: 0 4piksel 8piksel 0 rgba(0, 0, 0, 0.2);
    Genişlik: 400piksel;
    dolgu malzemesi: 8piksel;
    marj: 24piksel;
    arka plan rengi: Beyaz duman;
    font ailesi: sans Serif;
    }
    .kartresim {
    maksimum genişlik: 400piksel;
    }
    

    .Başlık {
    dolgu üstü: 16piksel;
    }
    .konteyner {
    dolgu malzemesi: 2piksel 16piksel;
    }
  3. bu ui-card.component.ts file zaten yeni bileşen için yeni işlevler, mantık ve işlevler ekleyebileceğiniz bir sınıf içeriyor. Şöyle görünmelidir:
    ihracatsınıf UiCardBileşeni uygular OnInit {
    yapıcı() { }
     ngOnInit(): geçersiz {
    // Buraya biraz kod mantığı ekleyin
     }
    // Veya mantığınızı ve işlevselliğinizi yeni işlevlere ekleyin
    }

Bileşen, Başka Bir Bileşenin HTML'sinde Nasıl Kullanılır

İçeri ui-card.component.ts, üç öznitelik vardır: seçici, templateUrl ve styleUrl. TemplateUrl, bileşenin HTML'sine atıfta bulunur (ve dolayısıyla HTML dosyasına bağlanır). styleUrls niteliği, bileşenin CSS'sine başvurur ve CSS dosyasına bağlanır.

@Bileşen({
 seçici: 'app-ui-card',
 templateUrl: './ui-card.component.html',
 styleUrls: ['./ui-card.component.css']
})

UI Card bileşenini başka bir bileşende kullandığınızda, "app-ui-card" seçici adını kullanacaksınız.

  1. İlk olarak, web sayfanıza biraz içerik ekleyin. Açık src/app/app.component.html ve bir gezinme çubuğu ekleyin:
    <div sınıfı="gezinme başlığı">
    <bir sınıf="gezinme başlığı"><b> Web Gezinti Çubuğu </b></a>
    </div>
  2. Gezinme çubuğunuza biraz stil ekleyin src/app/app.component.css:
    .navbar-başlık {
    arka plan rengi: #07393C;
    dolgu malzemesi: 30piksel 50piksel;
    Görüntüle: esnek;
    hizalama öğeleri: merkez;
    font ailesi: sans Serif;
    }
    .nav-başlığı {
    metin-dekorasyon: Yok;
    renk: beyaz;
    yazı Boyutu: 16nokta;
    }
  3. içinde gezinme çubuğunun altında app.component.html, yeni bir UI kartı ekleyin. "app-ui-card" seçici adını HTML etiketi olarak kullanın:
    <uygulama-ui-kartı></app-ui-card>
  4. Ayrıca etiketi birden çok kez ekleyerek bileşeni yeniden kullanabilirsiniz. Bunu yapmak için, bunun yerine birden çok app-ui-card HTML etiketi kullanmak için yukarıdaki satırı değiştirin:
    <div stili="ekran: esnek">
    <uygulama-ui-kartı></app-ui-card>
    <uygulama-ui-kartı></app-ui-card>
    <uygulama-ui-kartı></app-ui-card>
    </div>
  5. Angular uygulamanızı kullanarak terminalden çalıştırın. hizmet etmek komutunu girin ve web sitenizi bir web tarayıcısında açın.

Bileşene Girdi Parametreleri Nasıl Geçilir?

Bileşen yeniden kullanılabilir olduğundan, onu her kullandığınızda değiştirmek isteyebileceğiniz özellikler vardır. Bu durumda giriş parametrelerini kullanabilirsiniz.

  1. Ekle Giriş en üstteki ithalat listesine ui-card.component.ts:
    içe aktarmak { Bileşen, Giriş, OnInit } itibaren '@açısal/core';
  2. Ardından içine iki giriş değişkeni ekleyin UICardBileşeni sınıf. Bunlar, kartta görüntülenen konum adını ve görüntüyü değiştirmenize olanak tanır. doldur ngOnInit görüntüye giden yolu oluşturmak veya varsayılan bir değer kullanmak için gösterildiği gibi işlev:
    ihracatsınıf UiCardBileşeni uygular OnInit {
    @Giriş() yer ismi: sicim;
    @Giriş() resimAdı: sicim;
    yapıcı() { }
     ngOnInit(): geçersiz {
    eğer (Bu.imageName) {
    Bu.imageName = "./assets/images/" + Bu.imageName;
     } başka {
    Bu.imageName = "./assets/images/blue-mountains.jpg";
     }
     }
    }
  3. İçinde ui-card.component.html, bunun yerine "locationName" giriş değişkenini kullanmak için sabit kodlanmış Heading 4 "Blue Mountains" değerini değiştirin. Ayrıca sabit kodlanmış olanı da değiştirin kaynak "imageName" giriş değişkenini kullanmak için resim etiketindeki öznitelik:
    <div sınıfı="kart">
    <resim kaynağı ="{{imageName}}" alt="avatar">
    <div sınıfı="konteyner">
    <h4 sınıfı="Başlık">{{yer ismi? yer ismi: 'Mavi Dağlar'}}</h4>
    <p>NSW, Avustralya</p>
    </div>
    </div>
  4. İçinde app.component.html, "app-ui-card" etiketlerini "locationName" ve "imageName" girişlerini içerecek şekilde değiştirin. Her UI kartı öğesi için farklı bir değer girin. Görüntü dosyalarının Angular uygulamanızın varlıklar/görüntüler klasöründe bulunduğundan emin olun.
    <div stili="ekran: esnek">
    <app-ui-card [konumAdı]="'Mavi Dağlar'" [imageName]="'mavi-dağlar.jpg'"></app-ui-card>
    <app-ui-card [konumAdı]="'Sidney'" [imageName]="'sydney.jpg'"></app-ui-card>
    <app-ui-card [konumAdı]="'Newcastle'" [imageName]="'newcastle.jpg'"></app-ui-card>
    </div>
  5. Angular uygulamanızı kullanarak terminalden çalıştırın. hizmet etmek komutunu girin ve web sitenizi bir web tarayıcısında açın.

Başlatıcıya sahip olmayan bu özellikler hakkında bu noktada bir hata görebilirsiniz. Eğer öyleyse, sadece ekleyin veya ayarlayın "strictPropertyInitialization": false senin içinde tsconfig.json.

Yeni Bir Bileşene Nasıl Yönlendirilir

Bileşeniniz yeni bir sayfa gibi web sitenizin büyük bir bölümünü temsil ediyorsa, o bileşene de yönlendirebilirsiniz.

  1. Açık app-routing.module.ts. Dosyanın üst kısmındaki UI Kartı Bileşenini içe aktarın:
    içe aktarmak { UiCardComponent } itibaren './ui-card/ui-card.component';
  2. Route dizisine bir yönlendirme yolu ekleyin:
    const rotalar: Rotalar = [
    //... İhtiyaç duyabileceğiniz diğer rotalar...
     { yol: 'uicard', bileşen: UiCardComponent },
    ]
  3. içindeki tüm mevcut içeriği değiştir app.component.html yalnızca gezinme çubuğunu ve yönlendirici çıkış HTML etiketini dahil etmek için. Yönlendirici çıkışı, sayfalar arasında yönlendirme yapmanızı sağlar. Gezinti çubuğuna, href özniteliği rotalar dizisindeki yolla eşleşen bir köprü ekleyin:
    <div sınıfı="gezinme başlığı">
    <bir sınıf="gezinme başlığı"><b> Web Gezinti Çubuğu </b></a>
    <bir sınıf="gezinme bağlantısı" href="/uicard"><b> kullanıcı arayüzü kartı </b></a>
    </div>
    <yönlendirici çıkışı></router-outlet>
  4. Yeni UI kartı bağlantısına biraz stil ekleyin, app.component.css:
    .nav-a-link {
    metin-dekorasyon: Yok;
    renk: #4b6569;
    yazı Boyutu: 14nokta;
    kenar-sol: 60piksel;
    yazı tipi ağırlığı: daha hafif;
    }
  5. Angular uygulamanızı kullanarak terminalden çalıştırın. hizmet etmek komutunu girin ve web sitenizi bir web tarayıcısında açın. Bağlantı, web sayfasındaki gezinme çubuğunda görünecektir.
  6. Web tarayıcınızdaki URL adresini not alın. Varsayılan olarak, genellikle http://localhost: 4200/. UI kartı bağlantısına tıkladığınızda, sayfa şu adrese yönlendirilecektir: http://localhost: 4200/uicard, ve UI kartı görünecektir.

Angular'da Bileşenler Oluşturma

Bir bileşen, Angular'ın ana yapı taşlarından biridir. Bileşenler, web sitenizin farklı bölümlerini daha küçük, yeniden kullanılabilir parçalara ayırmanıza olanak tanır. Daha küçük düğmeler, kartlar, daha büyük kenar çubukları ve gezinme çubukları dahil olmak üzere her şeyi bileşenlere dönüştürebilirsiniz.

Bileşenin farklı örnekleri arasında veri iletmek için girdi değişkenlerini de kullanabilirsiniz. Ayrıca, URL yollarını kullanarak bileşene yönlendirebilirsiniz.

Yeni bir Angular uygulaması geliştiriyorsanız, kullanıcılarınızın bileşenleriniz arasında gezinmesi için bir gezinme çubuğu oluşturmanız gerekebilir. Duyarlı bir gezinme çubuğuna sahip olmak, onu farklı ekran boyutlarında farklı cihazlarda görüntülemenize olanak tanır.