Angular2'de bir bileşen başka bir bileşenin içine nasıl yerleştirilir?

Angular'da yeniyim ve hala anlamaya çalışıyorum. Microsoft Virtual Academy'deki kursu takip ettim ve harikaydı, ancak söyledikleri ile kodumun nasıl davrandığı arasında küçük bir tutarsızlık buldum! Özellikle, "bir bileşeni başka bir bileşenin içine koymayı" denedim:

@Component({
    selector: 'parent',
    directives: [ChildComponent],
    template: `
            <h1>Parent Component</h1>
            <child></child>
        `
    })
    export class ParentComponent{}

@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

Bu, kursta yaptıkları örnekle aynı, ancak benim kodumda çalışmıyor! Özellikle VisualStudio bana 'directives' özelliğinin bileşen dekoratöründe mevcut olmadığını söylüyor. Bunu nasıl çözebilirim?

Roman C
Edited question 2017ööp26öö11 Nisan 2017 в 11:26
Programlama
angular angular2-directives
2017ööp4öö10 Nisan 2017 в 10:04
3 görünümler
Çözüm

Bir bileşeni directives içine koyamazsınız

Bunu @NgModule bildirimlerinde kaydedersiniz:

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App , MyChildComponent ],
  bootstrap: [ App ]
})

ve sonra bunu Ebeveyn Şablon HTML'sine şu şekilde koyarsınız: ``

Bu kadar.

insertusernamehere
Edited answer 2018ösp39ös22 Şubat 2018 в 10:39
Yorumlar (6)

Yönergeler özelliğini kaldırırsanız çalışması gerekir.

@Component({
    selector: 'parent',
    template: `
            <h1>Parent Component</h1>

        `
    })
    export class ParentComponent{}

@Component({
    selector: 'child',    
    template: `
            <h4>Child Component</h4>
        `
    })
    export class ChildComponent{}

Yönergeler bileşenler gibidir ancak nitelikler içinde kullanılırlar. Ayrıca @Directive bildirimcisine sahiptirler. Yönergeler hakkında daha fazla bilgi için Yapısal Yönergeler ve Öznitelik Yönergeleri sayfalarına bakabilirsiniz.

Kapsamlı olarak açıklanan iki tür Angular yönergesi daha vardır başka bir yerde: (1) bileşenler ve (2) öznitelik yönergeleri.

Bir bileşen, bir HTML bölgesini yerel bir HTML gibi yönetir öğesi. Teknik olarak şablon içeren bir yönergedir.

Ayrıca sözlüğü açarsanız bileşenlerin de yönerge olduğunu görebilirsiniz.

Yönergeler aşağıdaki kategorilerden birine girer:

  • Bileşenler uygulama görünümlerini oluşturmak için uygulama mantığını bir HTML şablonuyla birleştirir. Bileşenler genellikle HTML olarak temsil edilir elemanları. Bunlar bir Angular uygulamasının yapı taşlarıdır.

gt; * Nitelik yönergeleri diğer HTML öğelerinin, niteliklerin, özelliklerin ve bileşenlerin davranışlarını dinleyebilir ve değiştirebilir. Bunlar genellikle HTML öznitelikleri olarak temsil edilir, dolayısıyla adı da buradan gelir.

  • Yapısal yönergeler HTML düzenini şekillendirmek veya yeniden şekillendirmekten sorumludur, tipik olarak öğeleri ekleyerek, kaldırarak veya manipüle ederek ve onların çocukları.

Fark, bileşenlerin bir şablona sahip olmasıdır. Bakınız Angular Mimarisi genel bakış.

Bir yönerge @Directive dekoratörüne sahip bir sınıftır. Bir bileşen bir directive-with-a-template; bir @Component dekoratörü aslında bir @Directive dekoratörü şablon odaklı özelliklerle genişletildi.

@Componentmetadatasıdirectives` niteliğine sahip değildir. Bakınız Bileşen dekoratörü.

Roman C
Edited answer 2017ööp57öö10 Nisan 2017 в 10:57
Yorumlar (2)

Sanırım Angular-2 sürümünüzde yönergeler Bileşen dekoratöründe desteklenmiyor, bu nedenle @NgModule içindeki diğer bileşenlerle aynı yönergeyi kaydetmeniz ve ardından aşağıdaki gibi bileşene içe aktarmanız ve ayrıca directives'i kaldırmanız gerekir: [ChildComponent] öğesini dekoratörden kaldırın.

import {myDirective} from './myDirective';
Akhil Menon
Edited answer 2018ööp14öö5 Şubat 2018 в 5:14
Yorumlar (0)