หากคุณอยู่ในอุตสาหกรรมการเขียนโค้ดมาระยะหนึ่งแล้วคุณอาจทราบดีอยู่แล้วว่าการพัฒนารูปแบบไดนามิกอาจเป็นงานในเว็บแอปพลิเคชัน ขึ้นอยู่กับแพลตฟอร์มการเขียนโปรแกรมที่คุณเลือกใช้ระดับความซับซ้อนของคุณมีแนวโน้มที่จะแตกต่างกันไป แต่โชคดีที่ความสำเร็จนี้สามารถทำได้อย่างง่ายดายใน Angular 8 และ Angular เวอร์ชันก่อนหน้าบางรุ่นด้วยเช่นกัน ในบทความนี้เราจะพูดถึง ngstyle ใน agular 8
ไวยากรณ์คุณสมบัติแม่แบบในเชิงมุม 8
ก่อนที่เราจะลงลึกในการสำรวจฟังก์ชั่นและโมดูลทั้งหมด Angular 8 มาพร้อมกับก่อนอื่นให้เราดูไวยากรณ์คุณสมบัติใน Angular 8 และวิธีที่เราจะเปลี่ยนสีของคุณสมบัติสีใน Java บริสุทธิ์
ให้ myDiv = document.getElementById ('my-div') myDiv.style.color = 'orange' // อัปเดต div ผ่านคุณสมบัติให้เราทำงานเดียวกันใน Angular 8 โดยใช้ไลบรารีในตัวรวมถึงโมดูลอื่น ๆ
สไตล์โดยใช้ไวยากรณ์คุณสมบัติข้อความนี้เป็นสีส้ม
ใช้ไวยากรณ์ {property} และบรรลุรหัสใด ๆ อย่างมีประสิทธิภาพและทำการเปลี่ยนแปลงเกือบจะทันที
ในตัวอย่างข้างต้นสิ่งที่เราทำมีการเข้าถึงคุณสมบัติสไตล์องค์ประกอบ div โดยตรง เมื่อเปรียบเทียบกับคุณสมบัติบนวัตถุ DOM และแอตทริบิวต์สิ่งนี้จะแตกต่างกัน
php print_r เป็นสตริง
ด้วยการใช้คุณลักษณะ Angular 8 ในตัวเราสามารถเพิ่มองค์ประกอบ CSS ในคลาสใดก็ได้ที่เราเลือก ดูตัวอย่างด้านล่างเพื่อทำความเข้าใจสิ่งนี้ให้ดีขึ้น
คลาส CSS ที่ใช้ไวยากรณ์คุณสมบัติข้อความนี้เป็นสีน้ำเงิน
NgClass และ NgStyle ใน Angular 8
มีอยู่ในตัวพร้อมทั้ง ngSyntax และ ngClass ใน Angular 8 และสามารถใช้เพื่อให้เหมาะกับวัตถุประสงค์ต่างๆ ในวิธีที่โมดูลที่สร้างขึ้นจะให้น้ำตาลสำหรับการใช้การเปลี่ยนแปลงกับสตริงที่ซับซ้อนมากกว่าโมดูลอื่น ๆ ลองมาดูไวยากรณ์ของ ngStyle ใน Angular 8
สไตล์โดยใช้ ngStyle
ในตัวอย่างข้างต้นเราได้ใช้ ngStyle ใน Angular เพื่อปรับเปลี่ยนพลวัตขององค์ประกอบต่างๆในคลาสของเราในขณะที่อยู่ในกลุ่มเดียวกันหลายองค์ประกอบเข้าด้วยกันเพื่ออำนวยความสะดวกให้ผู้ใช้ในการปรับแต่งคลาสตามความต้องการของเขาหรือเธอ
ความต่อเนื่องของตัวอย่างข้างต้น
สไตล์โดยใช้ ngStyle + -
เมื่อคุณรู้เกี่ยวกับ ngStyle แล้วเรามาดูองค์ประกอบบางอย่างของ ngStyle กัน
อาร์เรย์ของคลาสสตริงของคลาสอ็อบเจ็กต์ของคลาส
ngClass ในเชิงมุมยังช่วยให้เราทำการเปลี่ยนแปลงโค้ดของเราได้หลายวิธีเพื่อให้การเปลี่ยนแปลงแบบไดนามิกสามารถดำเนินการได้ในระยะเวลาอันสั้นเช่นเดียวกับ ngStyle
ดูตัวอย่างด้านล่างเพื่อดูการทำงานของทั้งคู่ร่วมกัน
นำเข้า {Component} จาก '@ angular / core' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) ส่งออกคลาส AppComponent {color = 'pink' size = 16 displayText = 'show-class' visible = true constructor () {} toggle () {this.visible =! this.visible this.displayText = this.visible? 'show-class': 'hide-class'}}NgClick ใน Angular 8
ตอนนี้คุณรู้คุณสมบัติพื้นฐานของทั้ง ngClass และ ngStyle และสิ่งที่สามารถทำได้โดยใช้ทั้งสองอย่างหรือทั้งสองอย่างในแพลตฟอร์ม Angular 8 แล้วให้เรามาดูการใช้งาน ngClick
ngClick คืออะไร?
หากในเหตุการณ์ใดเหตุการณ์หนึ่งคุณจำเป็นต้องรวมองค์ประกอบหลายอย่างของโปรแกรมเข้าด้วยกันเพื่อให้สามารถทำงานเดียวได้คุณต้องใช้ ngClick
ข้างต้นเป็นตัวอย่างวิธีใช้ ngClick ใน AngularJS เมื่อพูดถึง Angular8 ไม่มีโมดูลเดียวกันดังนั้นจึงจำเป็นต้องใช้สิ่งต่อไปนี้
ไวยากรณ์ข้างต้นใช้เพื่ออำนวยความสะดวกในการเชื่อมโยงเหตุการณ์ใน Angular8 โดยก่อนอื่นเรากำหนดชื่อของเหตุการณ์เป้าหมายพร้อมกับวงเล็บจากนั้นรวมคำสั่งเทมเพลตโดยรวมใบเสนอราคาและตัวดำเนินการเท่ากับ เมื่อเสร็จสิ้นขั้นตอนเหล่านี้ Angular8 จะตั้งค่าตัวจัดการเหตุการณ์สำหรับเหตุการณ์นี้และเมื่อใดก็ตามที่ถูกทริกเกอร์เหตุการณ์นี้จะถูกเรียกใช้งาน
ความแตกต่างระหว่าง git และ github
Angular8 ไม่ได้เป็นเพียงภาษาการเขียนโปรแกรมที่ได้รับความนิยมมากที่สุดภาษาหนึ่งเท่านั้น แต่ยังเป็นหนึ่งในภาษาที่มีไดนามิกมากที่สุดด้วยคุณสมบัติที่หลากหลาย ด้วยเหตุนี้เราจึงมาถึงจุดสิ้นสุดของบทความเกี่ยวกับ NgStyle ในเชิงมุม ฉันหวังว่าคุณจะเข้าใจวิธีการทำงานเหล่านี้
ตรวจสอบไฟล์ โดย Edureka Angular เป็นเฟรมเวิร์ก JavaScript ที่ใช้เพื่อสร้างแอปพลิเคชันเว็บฝั่งไคลเอ็นต์ที่ปรับขนาดได้และมีประสิทธิภาพ เนื่องจากการใช้ Angular framework อยู่ในระดับสูงการจัดการประสิทธิภาพของแอปพลิเคชันจึงเป็นแรงผลักดันจากชุมชนโดยทางอ้อมทำให้เกิดโอกาสในการทำงานที่ดีขึ้น การฝึกอบรมการรับรองเชิงมุมมีวัตถุประสงค์เพื่อครอบคลุมแนวคิดใหม่ ๆ เกี่ยวกับการพัฒนาแอปพลิเคชันขององค์กร