30 seconds of angular
1.0.0
Koleksi cuplikan sudut berguna yang dapat Anda pahami dalam 30 detik atau kurang.
Cuplikan pemula
Cuplikan perantara
Cuplikan lanjutan
Enum sangat bagus tetapi tidak terlihat dalam templat sudut secara default. Dengan trik kecil ini Anda dapat membuatnya dapat diakses.
enum Animals {
DOG ,
CAT ,
DOLPHIN
}
@ Component ( {
...
} )
export class AppComponent {
animalsEnum : typeof Animals = Animals ;
}
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Template enum
Lihat lembar cheat angular atau (versi alternatif) yang berisi banyak informasi berguna yang terkondensasi di satu tempat.
Daftar periksa Angular juga berisi daftar kesalahan umum yang dibuat saat mengembangkan aplikasi sudut.
https://malcoded.com/angular-heat-sheet/,https://angular.io/guide/cheatsheet,https://angular.io/guide/styluide
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tip Cheat Sheet
Debug status komponen di konsol browser dengan menjalankan:
ng . probe ( $0 ) . componentInstance
$0- adalah simpul DOM yang saat ini dipilih dalam alat dev ($1untuk yang sebelumnya dan seterusnya).
Dengan ivy renderer engine:
ng . getComponent ( $0 ) https://blog.angularindepth.com/everything-you-need-to-now-about-debugging-angular-applications-d308ed8a51b4
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tips yang bagus untuk diketahui
Jika Anda menggunakan nilai ViewEncapsulation yang berbeda dari default, mungkin akan menakutkan untuk mengatur nilai secara manual untuk setiap komponen.
Untungnya Anda dapat mengonfigurasinya secara global saat bootstrap aplikasi Anda:
platformBrowserDynamic ( ) . bootstrapModule ( AppModule , [
{
// NOTE: Use ViewEncapsulation.None only if you know what you're doing.
defaultEncapsulation : ViewEncapsulation . None
}
] ) ;
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: gaya konfigurasi
Untuk bertindak berdasarkan gesekan, panci, dan pinhces serta gerakan seluler lainnya, Anda dapat menggunakan hammerjs dengan dekorator HostListener , atau ikatan acara,
npm install hammerjs@ HostListener ( 'swiperight' )
public swiperight ( ) : void {
// Run code when a user swipes to the right
} Berikut adalah sampel tentang cara menggunakan semua binding acara hammerjs , Anda dapat menggunakan acara ini dengan HostListener juga:
<!-- pan events -->
< div (pan) =" logEvent($event) " > </ div >
< div (panstart) =" logEvent($event) " > </ div >
< div (panmove) =" logEvent($event) " > </ div >
< div (panend) =" logEvent($event) " > </ div >
< div (pancancel) =" logEvent($event) " > </ div >
< div (panleft) =" logEvent($event) " > </ div >
< div (panright) =" logEvent($event) " > </ div >
< div (panup) =" logEvent($event) " > </ div >
< div (pandown) =" logEvent($event) " > </ div >
<!-- pinch events -->
< div (pinch) =" logEvent($event) " > </ div >
< div (pinchstart) =" logEvent($event) " > </ div >
< div (pinchmove) =" logEvent($event) " > </ div >
< div (pinchend) =" logEvent($event) " > </ div >
< div (pinchcancel) =" logEvent($event) " > </ div >
< div (pinchin) =" logEvent($event) " > </ div >
< div (pinchout) =" logEvent($event) " > </ div >
<!-- press events -->
< div (press) =" logEvent($event) " > </ div >
< div (pressup) =" logEvent($event) " > </ div >
<!-- rotate events -->
< div (rotate) =" logEvent($event) " > </ div >
< div (rotatestart) =" logEvent($event) " > </ div >
< div (rotatemove) =" logEvent($event) " > </ div >
< div (rotateend) =" logEvent($event) " > </ div >
< div (rotatecancel) =" logEvent($event) " > </ div >
<!-- swipe events -->
< div (swipe) =" logEvent($event) " > </ div >
< div (swipeleft) =" logEvent($event) " > </ div >
< div (swiperight) =" logEvent($event) " > </ div >
< div (swipeup) =" logEvent($event) " > </ div >
< div (swipedown) =" logEvent($event) " > </ div >
<!-- tap event -->
< div (tap) =" logEvent($event) " > </ div > https://github.com/angular/angular/blob/master/packages/platform browser/src/dom/events/hammer_gestures.ts.http://hammerjs.github.io/api/#hammer.manager.htpps://angular.io
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Gerakan Komponen Tips yang Baik
Anda dapat membuat komponen helper sendiri dan menggunakannya alih -alih *ngIf .
@ Component ( {
selector : 'loader' ,
template : `
<ng-content *ngIf="!loading else showLoader"></ng-content>
<ng-template #showLoader>? Wait 10 seconds!</ng-template>
`
} )
class LoaderComponent {
@ Input ( ) loading : boolean ;
}Untuk contoh penggunaan:
< loader [loading] =" isLoading " > ? ? ? </ loader >Perhatikan bahwa konten akan dievaluasi dengan penuh semangat, misalnya dalam cuplikan di bawah
destroy-the-worldakan dibuat sebelum pemuatan bahkan dimulai:
< loader [loading] =" isLoading " > < destroy-the-world > </ destroy-the-world > </ loader > https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b,https://blog.angularindepth.com/https-medium-com-thomasburleson-animated-ghosts-bfc045a5a5115151
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tips Template Komponen yang Baik untuk Diketahui
Dengan ng-content Anda dapat meneruskan elemen apa pun ke komponen. Ini menyederhanakan pembuatan komponen yang dapat digunakan kembali.
@ Component ( {
selector : 'wrapper' ,
template : `
<div class="wrapper">
<ng-content></ng-content>
</div>
` ,
} )
export class Wrapper { } < wrapper >
< h1 > Hello World! </ h1 >
</ wrapper > https://medium.com/p/96a29d70d11b
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: komponen tips yang bagus untuk diketahui
*ngIf Directive juga mendukung pernyataan else .
< div *ngIf =" isLoading; else notLoading " > loading... </ div >
< ng-template #notLoading > not loading </ ng-template >
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Templat NGIF
Navigasi dengan matriks params:
Router akan menavigasi ke /first;name=foo/details
< a [routerLink] =" ['/', 'first', {name: 'foo'}, 'details'] " >
link with params
</ a > https://stackblitz.com/edit/angular-xvy5pd
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Routing
Dalam kasus tertentu @Input dan properti @Output dapat dinamai secara berbeda dari input dan output yang sebenarnya.
< div
pagination
paginationShowFirst =" true "
(paginationPageChanged) =" onPageChanged($event) " >
</ div > @ Directive ( { selector : '[pagination]' } )
class PaginationComponent {
@ Input ( 'paginationShowFirst' )
showFirst : boolean = true ;
@ Output ( 'paginationPageChanged' )
pageChanged = new EventEmitter ( ) ;
}Catatan: Gunakan ini dengan bijak, lihat Rekomendasi StyleGuide
https://angular.io/guide/styleguide#style-05-13
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Templat Komponen
Operator navigasi yang aman membantu mencegah pengecualian referensi nol dalam ekspresi template komponen. Ini mengembalikan nilai properti objek jika ada atau nol sebaliknya.
< p > I will work even if student is null or undefined: {{student?.name}} </ p >{{a?.b?.c}} Di bawahnya akan dikompilasi untuk.
(_co.a == null)? null: ((_co.a.b == null)? null: _co.a.b.c));Angular/Angular#791
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tip Penanganan Properti Objek Baik Untuk Diketahui
Untuk menghindari operasi yang mahal, kami dapat membantu menyentuh untuk melacak item mana yang ditambahkan atau dihapus IE menyesuaikan algoritma pelacakan default dengan memberikan opsi trackby ke NGFOROF.
Jadi, Anda dapat memberikan fungsi trackby khusus Anda yang akan mengembalikan pengidentifikasi unik untuk setiap item yang diulang. Misalnya, beberapa nilai kunci dari item. Jika nilai kunci ini cocok dengan yang sebelumnya, maka Angular tidak akan mendeteksi perubahan.
Trackby mengambil fungsi yang memiliki indeks dan item args.
@ Component ( {
selector : 'my-app' ,
template : `
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">{{item.id}}</li>
</ul>
`
} )
export class AppComponent {
trackByFn ( index , item ) {
return item . id ;
}
}Jika TrackBy diberikan, trek sudut berubah dengan nilai pengembalian fungsi.
Sekarang ketika Anda mengubah koleksi, Angular dapat melacak item mana yang telah ditambahkan atau dihapus sesuai dengan pengidentifikasi unik dan membuat/menghancurkan hanya item yang diubah.
https://angular.io/api/common/ngforof,https://angular.io/api/core/trackbyfunction
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: kinerja komponen tips yang bagus untuk diketahui
Di bawah Hood Angular mengkompilasi arahan struktural ke dalam elemen ng-template, misalnya:
<!-- This -->
< div *ngFor =" let item of [1,2,3] " >
<!-- Get expanded into this -->
< ng-template ngFor [ngForOf] =" [1,2,3] " let-item =" $implicit " > </ ng-template >Nilai yang diteruskan ke *ngFor Directive ditulis menggunakan microsyntax. Anda dapat mempelajarinya di dokumen.
Lihat juga alat interaktif yang menunjukkan ekspansi oleh Alexey Zuev
https://angular.io/guide/struktural-direktif#microsyntax,https://alexzuza.github.io/ng-struktural-direktif-expander/,https://angular.io/guide/struktural-dirionside--ngfor
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tip Microsyntax Arahan Struktural
Terkadang kita perlu bekerja dengan setiap kontrol adalah bentuk. Begini cara dilakukan:
function flattenControls ( form : AbstractControl ) : AbstractControl [ ] {
let extracted : AbstractControl [ ] = [ form ] ;
if ( form instanceof FormArray || form instanceof FormGroup ) {
const children = Object . values ( form . controls ) . map ( flattenControls ) ;
extracted = extracted . concat ( ... children ) ;
}
return extracted ;
}Untuk contoh penggunaan:
// returns all dirty abstract controls
flattenControls ( form ) . filter ( ( control ) => control . dirty ) ;
// mark all controls as touched
flattenControls ( form ) . forEach ( ( control ) =>
control . markAsTouched ( { onlySelf : true } ) ) ; https://angular.io/guide/reactive-orms
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tip Bentuk Reaktif Baik Untuk Diketahui
Sangat mudah untuk menambahkan pintasan keyboard di templat:
< textarea (keydown.ctrl.enter) =" doSomething() " > </ textarea > < input (keydown.enter) =" ... " >
< input (keydown.a) =" ... " >
< input (keydown.esc) =" ... " >
< input (keydown.shift.esc) =" ... " >
< input (keydown.control) =" ... " >
< input (keydown.alt) =" ... " >
< input (keydown.meta) =" ... " >
< input (keydown.9) =" ... " >
< input (keydown.tab) =" ... " >
< input (keydown.backspace) =" ... " >
< input (keydown.arrowup) =" ... " >
< input (keydown.shift.arrowdown) =" ... " >
< input (keydown.shift.control.z) =" ... " >
< input (keydown.f4) =" ... " > https://alligator.io/angular/binding-keyup-keydown-events
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tips bagus untuk diketahui
Setiap komponen sudut yang diberikan dibungkus dalam elemen host (yang sama dengan pemilih komponen).
Dimungkinkan untuk mengikat properti dan atribut elemen host menggunakan dekorator @hostbinding, misalnya
import { Component , HostBinding } from '@angular/core' ;
@ Component ( {
selector : 'my-app' ,
template : `
<div>Use the input below to select host background-color:</div>
<input type="color" [(ngModel)]="color">
` ,
styles : [
`:host { display: block; height: 100px; }`
]
} )
export class AppComponent {
@ HostBinding ( 'style.background' ) color = '#ff9900' ;
}
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Komponen
Secara umum kami mendapatkan satu instance layanan per seluruh aplikasi. Dimungkinkan juga untuk membuat instance layanan per komponen atau arahan.
@ Component ( {
selector : 'provide' ,
template : '<ng-content></ng-content>' ,
providers : [ Service ]
} )
export class ProvideComponent { } @ Directive ( {
selector : '[provide]' ,
providers : [ Service ]
} )
export class ProvideDirective { } https://angular.io/guide/hierarchical-dependency-clojection#component-level-level-lectorss.https://stackblitz.com/edit/angular-cdk-happy-animals
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tips Komponen Injeksi Ketergantungan
Dimungkinkan untuk menambahkan pendengar acara global di komponen/arahan Anda dengan HostListener . Angular akan mengurus berhenti berlangganan setelah arahan Anda dihancurkan.
@ Directive ( {
selector : '[rightClicker]'
} )
export class ShortcutsDirective {
@ HostListener ( 'window:keydown.ArrowRight' )
doImportantThings ( ) {
console . log ( 'You pressed right' ) ;
}
}Anda dapat memiliki beberapa binding:
@ HostListener ( 'window:keydown.ArrowRight' )
@ HostListener ( 'window:keydown.PageDown' )
next ( ) {
console . log ( 'Next' )
}Anda juga dapat melewati params:
@ HostListener ( 'window:keydown.ArrowRight' , '$event.target' )
next ( target ) {
console . log ( 'Pressed right on this element: ' + target )
}
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Komponen Acara
Terkadang Anda perlu mendapatkan akses ke document global.
Untuk menyederhanakan pengujian unit, Angular menyediakannya melalui injeksi ketergantungan:
import { DOCUMENT } from '@angular/common' ;
import { Inject } from '@angular/core' ;
@ Component ( {
selector : 'my-app' ,
template : `<h1>Edit me </h1>`
} )
export class AppComponent {
constructor ( @ Inject ( DOCUMENT ) private document : Document ) {
// Word with document.location, or other things here....
}
} https://angular.io/api/common/document
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Injeksi ketergantungan
Inilah cara untuk memberi tahu pengguna bahwa ada bidang dengan nilai-nilai non-valid.
markFieldsAsTouched Fungsi Formgroup atau Formarray sebagai argumen.
function markFieldsAsTouched ( form : AbstractControl ) : void {
form . markAsTouched ( { onlySelf : true } ) ;
if ( form instanceof FormArray || form instanceof FormGroup ) {
Object . values ( form . controls ) . forEach ( markFieldsAsTouched ) ;
}
}Sangat berguna untuk memeriksa metode yang lebih umum mengakses semua kontrol bentuk bersarang oleh Thekiba untuk bekerja dengan kontrol.
https://angular.io/guide/reactive-orms
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tip Validasi Bentuk Reaktif Baik Untuk Diketahui
EventEmitters yang digunakan untuk @Output hanya dapat diamati dengan metode emit.
Ini berarti bahwa Anda dapat menggunakan instance Observable sebagai gantinya, misalnya kita dapat menghubungkan perubahan nilai FormControl secara langsung:
readonly checkbox = new FormControl ( ) ;
@ Output ( ) readonly change = this . checkbox . valueChanges ;
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: output tip
Dimungkinkan untuk mengambil templat sebagai @Input untuk komponen untuk menyesuaikan render
@ Component ( {
template : `
<nav>
<ng-container *ngTemplateOutlet="template"></ng-container>
</nav>
` ,
} )
export class SiteMenuComponent {
@ Input ( ) template : TemplateRef < any > ;
} < site-menu [template] =" menu1 " > </ site-menu >
< ng-template #menu1 >
< div > < a href =" # " > item1 </ a > </ div >
< div > < a href =" # " > item2 </ a > </ div >
</ ng-template >Catatan:
ng-contentharus digunakan untuk sebagian besar kasus dan lebih sederhana dan lebih deklaratif. Hanya gunakan pendekatan ini jika Anda membutuhkan fleksibilitas ekstra yang tidak dapat dicapai dengan konten NG.
https://blog.angular-university.io/angular-g-template-ng-container-ngtemplateOutlet
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Template
Secara default Angular Strips semua whitespace dalam templat untuk menyimpan byte. Umumnya aman.
Untuk kasus yang jarang ketika Anda perlu melestarikan ruang Anda dapat menggunakan atribut ngPreserveWhitespaces khusus:
< div ngPreserveWhitespaces >
(___()'`;
/, /`
jgs \"--\
</ div >Anda juga dapat menggunakan opsi PreservHitespaces pada komponen.
https://twitter.com/mgechev/status/1108913389277839360
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tip
Sementara cara terbaik untuk menggunakan kembali kode Anda adalah membuat komponen, juga dimungkinkan untuk melakukannya dalam templat.
Untuk melakukan ini, Anda dapat menggunakan ng-template bersama dengan arahan *ngTemplateOutlet .
< p >
< ng-container *ngTemplateOutlet =" fancyGreeting " > </ ng-container >
</ p >
< button >
< ng-container *ngTemplateOutlet =" fancyGreeting " > </ ng-container >
</ button >
< ng-template #fancyGreeting >
Hello < b > {{name}}! </ b >
</ ng-template > https://angular.io/api/common/ngtemplateoutlet,https://angular.io/guide/Structural-directives#the-ic-template
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Templat
Jika Anda memerlukan pipe khusus, sebelum membuatnya, pertimbangkan untuk memeriksa Paket Pipa NGX yang memiliki 70+ pipa khusus yang sudah dilanda.
Berikut beberapa contoh:
< p > {{ date | timeAgo }} </ p >
<!-- Output: "last week" -->
< p > {{ 'foo bar' | ucfirst }} </ p >
<!-- Output: "Foo bar" -->
< p > 3 {{ 'Painting' | makePluralString: 3 }} </ p >
<!-- Output: "3 Paintings" -->
< p > {{ [1, 2, 3, 1, 2, 3] | max }} </ p >
<!-- Output: "3" --> https://github.com/danrevah/ngx-pipes
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Pustaka Pipa Tip
Anda dapat menggunakan binding properti canggih untuk mengatur nilai gaya tertentu berdasarkan nilai properti komponen:
< p [style.background-color] =" 'green' " >
I am in green background
</ p >
< p [style.font-size.px] =" isImportant ? '30' : '16' " >
May be important text.
</ p > <!-- Width in pixels -->
< div [style.width.px] =" pxWidth " > </ div >
<!-- Font size in percentage relative to the parent -->
< div [style.font-size.%] =" percentageSize " > ... </ div >
<!-- Height relative to the viewport height -->
< div [style.height.vh] =" vwHeight " > </ div >
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Gaya
Mirip dengan bagaimana Anda dapat mengikat dua arah [(ngModel)] Anda dapat mengikat dua arah properti kustom pada komponen, misalnya [(value)] . Untuk melakukannya gunakan penamaan input/output yang sesuai:
@ Component ( {
selector : 'super-input' ,
template : `...` ,
} )
export class AppComponent {
@ Input ( ) value : string ;
@ Output ( ) valueChange = new EventEmitter < string > ( ) ;
}Maka Anda dapat menggunakannya sebagai:
< super-input [(value)] =" value " > </ super-input >
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tip Binding
Dimungkinkan untuk menjalankan tugas asinkron sebelum aplikasi dimulai dengan memberikan fungsi yang mengembalikan janji menggunakan token APP_INITIALIZER .
@ NgModule ( {
providers : [
{
provide : APP_INITIALIZER ,
useValue : functionReturningPromise
multi : true
} ,
} )
export class AppModule { }
https://hackernoon.com/hook-into-angular-initialization-process-add41a6b7e,https://angular.io/api/core/app_initializer
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tip
Untuk tujuan pengujian, Anda mungkin ingin menyuntikkan objek window.location di komponen Anda. Anda dapat mencapai ini dengan mekanisme InjectionToken khusus yang disediakan oleh Angular.
export const LOCATION_TOKEN = new InjectionToken < Location > ( 'Window location object' ) ;
@ NgModule ( {
providers : [
{ provide : LOCATION_TOKEN , useValue : window . location }
]
} )
export class SharedModule { }
//...
@ Component ( {
} )
export class AppComponent {
constructor (
@ Inject ( LOCATION_TOKEN ) public location : Location
) { }
} https://itnext.io/testing browser-window-location-in-angular-application-e4e8388508ff,https://angular.io/guide/dependency-clependency
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Pengujian Injeksi Ketergantungan
Dimungkinkan untuk menggunakan @ViewChild (juga @ViewChildren dan @ContentChild/Children ) untuk meminta komponen dari berbagai jenis menggunakan injeksi ketergantungan.
Dalam contoh di bawah ini kita dapat menggunakan @ViewChildren(Base) untuk mendapatkan contoh Foo dan Bar .
abstract class Base { }
@ Component ( {
selector : 'foo' ,
providers : [ { provide : Base , useExisting : Foo } ]
} )
class Foo extends Base { }
@ Component ( {
selector : 'bar' ,
providers : [ { provide : Base , useExisting : Bar } ]
} )
class Bar extends Base { }
// Now we can require both types of components using Base.
@ Component ( { template : `<foo></foo><bar></bar>` } )
class AppComponent {
@ ViewChildren ( Base ) components : QueryList < Base > ;
} https://www.youtube.com/watch?v=prrgo6f0cjs
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Komponen Tips Komponen Good-to-Komponen Injeksi
Angular memungkinkan kita untuk mengontrol cara modul preloading ditangani.
Ada 2 strategi yang disediakan oleh @angular/router : PreloadAllModules dan NoPreloading . Yang terakhir diaktifkan secara default, hanya preloading modul malas sesuai permintaan.
Kami dapat mengesampingkan perilaku ini dengan memberikan strategi preloading khusus: dalam contoh di bawah ini kami memuat semua modul yang disertakan jika koneksi baik.
import { Observable , of } from 'rxjs' ;
export class CustomPreloading implements PreloadingStrategy {
public preload ( route : Route , load : ( ) => Observable < any > ) : Observable < any > {
return preloadingConnection ( ) ? load ( ) : of ( null ) ;
}
}
const routing : ModuleWithProviders = RouterModule . forRoot ( routes , {
preloadingStrategy : CustomPreloading
} ) ;Perhatikan bahwa contoh di atas tidak akan sangat efisien untuk aplikasi yang lebih besar, karena akan memuat semua modul.
https://angular.io/api/router/preloadingstrategy,https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb, https://medium.com/@adrianfaci u/custom-preloading-strategy-for-angular-modules-b3b5c873681a, https: //coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: router
Dimungkinkan untuk menggunakan tag SVG di komponen sudut Anda, untuk membuat grafik dan visualisasi yang indah. Ada 3 hal yang perlu Anda ketahui:
attr < circle [attr.cx] =" x " [attr.cy] =" y " > </ circle >// Not: < child-component > </ child-component >
< g child-component > </ g > @ Component ( { selector : '[child-component]' } )@ Component ( {
selector : '[child-component]' ,
template : `<svg:circle></svg:circle>`
} )
Demo interaktif cuplikan ini | ⬆ kembali ke atas | Tag: Tip SVG
