Apakah templateUrls dan styleUrls dalam Angular?

Pembaca seperti anda membantu menyokong MUO. Apabila anda membuat pembelian menggunakan pautan di tapak kami, kami mungkin mendapat komisen ahli gabungan.

Menggunakan Angular, anda boleh memisahkan halaman, dialog atau bahagian lain apl anda kepada komponen. Komponen dalam aplikasi Angular terutamanya terdiri daripada fail HTML, CSS dan TypeScript.

Dalam fail TypeScript, anda boleh menambah sebarang logik yang diperlukan untuk UI berfungsi, seperti mendapatkan semula data daripada pelayan.

Anda juga boleh memaparkan HTML dan CSS komponen menggunakan TypeScript, dengan menentukan atribut templat dan gayanya. Anda boleh menggunakan templateUrl atau styleUrls untuk memaut ke fail HTML atau CSS luaran.

saiz fail paging untuk ram 16gb

MAKEUSEOF VIDEO OF THE DAY

Apakah templat dan templatUrl dalam Angular?

Bila kamu buat komponen anda sendiri dalam Angular , anda boleh memaparkan HTML untuknya menggunakan templat. Terdapat dua cara anda boleh menulis templat HTML anda:

cara memadam akaun hotmail 2018

Anda boleh menulis kod HTML anda di dalam templat dalam fail TypeScript itu sendiri.
Anda boleh menulis kod HTML anda dalam fail luaran dan memautkan fail TypeScript ke fail HTML ini.

Dalam komponen baharu, anda boleh menetapkan sama ada atribut 'template' atau 'templateUrl' bergantung pada tempat anda menulis HTML anda.

Buat a apl Angular baharu .
Dalam terminal aplikasi anda, jalankan daripada komponen jana arahan untuk mencipta komponen baharu. Panggil komponen baharu 'about-page'.
```
ng generate component about-page
```
Dalam app.component.html, gantikan kod semasa dengan teg untuk komponen baharu anda:
```
<app-about-page></app-about-page>
```
Buka about-page.component.ts fail. Jika anda tidak mempunyai banyak kod HTML, anda boleh menggunakan atribut templat untuk menulisnya terus di dalam fail TypeScript. Gantikan penghias @Component dengan yang berikut:
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```

Jika anda ingin memasukkan templat berbilang baris, anda boleh menggunakan tanda petikan tanda belakang sebagai ganti:

@Component({ 
  selector: 'app-about-page', 
  template: `<h2>About Page</h2> 
              <br> 
              <p>This is rendering the HTML from the TypeScript file!</p>` 
})

Di terminal, taip daripada servis untuk menyusun kod anda dan menjalankannya dalam pelayar web. Buka apl anda di http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.
Dalam about-page.component.ts , gantikan 'template' dengan 'templateUrl' sebaliknya. Sertakan pautan ke fail HTML luaran komponen. Anda boleh menggunakan 'templateUrl' jika anda mempunyai kod HTML yang lebih kompleks yang memerlukan failnya sendiri.
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```

Tambahkan beberapa kod HTML pada about-page.component.html fail:

<h2>About Page</h2> 
<p>This is rendering the HTML from the HTML file!</p>

Kembali ke penyemak imbas anda atau jalankan semula daripada servis untuk menyusun semula kod anda. Buka apl anda di http://localhost:4200/. The browser now renders the HTML from the about-page.component.html fail.

Apakah gaya dan gayaUrl dalam Angular?

Begitu juga dengan HTML, anda boleh menggunakan sama ada 'style' atau 'styleUrls' bergantung pada tempat anda memilih untuk menyimpan CSS anda.

Anda boleh memasukkan CSS dalam kod TypeScript jika anda mempunyai pengisytiharan CSS yang sangat mudah. Jika tidak, anda boleh menggunakan 'styleUrls' untuk memautkan fail TypeScript ke CSS luaran yang mengandungi lebih banyak gaya.

bagaimana anda tahu jika gambar 300dpi

Dalam aplikasi Angular yang anda buat sebelum ini, buka fail about-page.component.ts fail. Tambahkan atribut 'gaya' pada komponen. Di dalam 'gaya', tambahkan penggayaan CSS anda untuk halaman:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
Di terminal, taip daripada servis untuk menyusun kod anda dan menjalankannya dalam pelayar web. Buka apl anda di http://localhost:4200/ to view the styling specified in the TypeScript file.
Jika anda mempunyai banyak CSS, gunakan 'styleUrls' dan bukannya 'styles', untuk memautkan fail TypeScript ke fail CSS luaran. Dalam about-page.component.ts , gantikan penghias @Component dengan yang berikut:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```
Tambahkan beberapa penggayaan CSS pada about-page.component.css :
```
h2 { 
  color: blue 
} 
p { 
  color: darkorange 
}
```
Kembali ke penyemak imbas anda atau jalankan semula daripada servis untuk menyusun semula kod anda. Buka apl anda di http://localhost:4200/ to view the styles used from the external CSS file.

Memaparkan HTML Komponen dalam Sudut

Kini anda tahu cara berbeza anda boleh memaparkan kandungan HTML dan CSS anda dalam aplikasi Angular. Anda boleh menentukan pendekatan yang ingin anda gunakan berdasarkan kerumitan HTML dan CSS anda.

Jika berminat, anda boleh meneroka cara menghantar data antara fail HTML dan TypeScript bagi komponen Angular.