Trước khi chúng ta bắt đầu trên các hình thức định hướng mẫu Angular,
chúng ta cần phải tìm một cách để chồng lên nội dung trên đầu trang của chế độ xem web hiện tại.
Bootstrap, chúng tôi có các mô hình cho phép chúng tôi phủ lên nội dung trên đầu trang Web.
Với việc sử dụng vật liệu Góc trong ứng dụng Góc của chúng tôi,
vật liệu Góc cung cấp một thành phần được gọi là
Thành phần Đối thoại Góc cho
phép bạn phủ lên nội dung trên đầu của chế độ xem hiện tại. Chúng ta
hãy xem cách chúng ta sử dụng Thành phần Đối thoại trong bài tập này.
Để bắt đầu vào bài tập này, chúng
ta hãy đi đến mã của chúng tôi và chúng ta cần phải tìm
một cách để kích hoạt các ứng dụng để hiển thị các cuộc đối thoại.
Vì vậy, để làm điều đó, chúng ta hãy thêm vào một nút vào thanh công cụ của chúng tôi ở đây.
Vì vậy, đi đến thanh công cụ ngay ở trên cùng ở đây,
hãy để tôi thêm vào một khoảng với lớp đệm flex mà chúng tôi
đã giới thiệu vào
tập tin SCSS của chúng tôi cho ứng dụng của chúng tôi.
Vì vậy, chúng tôi đã giới thiệu các spacer flexor trong tập tin styles.scss ở đây,
ngay dưới đây.
Vì vậy, đó là lớp mà chúng ta sẽ sử dụng với một khoảng ở đây.
Vì vậy, khi bạn áp dụng các flexor spacer cho span,
những gì nó làm là nó cung cấp đủ không gian giữa
các yếu tố trước đó và các yếu tố sau đây.
Vì vậy, nó sẽ đẩy bất cứ điều gì các yếu tố mà sau khoảng thời gian đến
cạnh bên phải của màn hình càng nhiều càng tốt.
Vì vậy, ở đây, sau này,
hãy để tôi thêm vào một nút ở đây.
Vì vậy, nút này khi nhấp vào sẽ
gọi một chức năng gọi là OpenLoginForms.
Vì vậy, như bạn nhận ra,
đây là nơi chúng tôi sẽ hỗ trợ một hình thức cho đơn đăng ký của chúng tôi.
Chúng ta sẽ xem xét cách hình thức được phát triển trong bài tập tiếp theo.
Bây giờ, cho điều này, hãy để tôi thêm vào
các biểu tượng tuyệt vời phông chữ tương ứng.
Vì vậy, Tôi sẽ nói fa fa-đăng nhập,
và cũng có thể thêm vào fa-lg để điều đó.
Vì vậy, điều đó sẽ thêm vào một biểu tượng,
biểu tượng đăng nhập ở đây,
và sau đó sau đó,
chúng tôi sẽ đặt đăng nhập từ trong đó.
Vì vậy, điều này sẽ tạo ra một nút gọi là đăng nhập trong thanh công cụ
đến cạnh phải của màn hình cùng với biểu tượng đăng nhập ở
đó, khi nhấp vào, sẽ mở một biểu mẫu đăng nhập.
Biểu mẫu đăng nhập này sẽ được lưu trữ bên trong một thành phần đối thoại tài liệu.
Bây giờ, để tạo ra một thành phần đối thoại, rõ ràng,
chúng ta nhận ra rằng đó sẽ là một thành phần
cần được phủ lên trên quan điểm hiện tại ở đó.
Vì vậy, chúng ta cần một thành phần khác để được thêm vào ứng dụng của chúng tôi.
Vì vậy, chúng ta hãy đi đến thiết bị đầu cuối và sau đó thêm vào một thành phần nữa vào ứng dụng của chúng tôi.
Đi đến thiết bị đầu cuối, hãy để tôi gõ ng g thành phần đăng nhập.
Vì vậy, chúng tôi đã thêm một thành phần mới được gọi là thành phần đăng nhập vào ứng dụng của chúng tôi.
Một khi thành phần đăng nhập được thêm vào,
chúng ta hãy đi và cấu hình thành phần đăng nhập để trở thành một thành phần đối thoại trong ứng dụng của chúng tôi.
Vì vậy, để làm điều đó, chúng ta hãy quay trở lại mã của chúng tôi.
Quay lại mã của chúng tôi,
bây giờ chúng ta thấy rằng thành phần đăng nhập bây giờ đang mở.
Hãy để tôi mở tập tin thành phần đăng nhập.
Vì vậy, cấu hình này như là
một thành phần đối thoại trong ứng dụng Angular bằng cách sử dụng thành phần đối thoại tài liệu.
Hãy để tôi nhập MatDialog.
Vì vậy, đây là thành phần hỗ trợ
các thành phần đối thoại trong vật liệu góc và sau đó cũng
cho phép tôi nhập Matdialogref và chúng được nhập khẩu
từ vật liệu góc ở đây.
Điều này sẽ cho phép chúng tôi tạo ra thành phần của mình và biến nó thành một thành phần đối thoại.
Bây giờ, sau này, chúng ta hãy đi trước và sau đó cấu hình tập tin mẫu của chúng tôi ở đây.
Vì vậy, đi đến các tập tin mẫu ở đây,
tôi sẽ tạo ra điều này như nói mat-toolbar.
Vì vậy, trong cuộc đối thoại này cũng sẽ hiển thị một thanh công cụ.
Đối với thanh công cụ này, tôi sẽ nói đăng nhập ngay ở phía trên, sau đó,
chúng tôi sẽ giới thiệu lớp đệm flex
ở đây và sau đó sau khi lớp đệm flex,
chúng tôi sẽ thêm vào một nút
với các thuộc tính mat-nút mat-dialog-close.
Vì vậy, mat-dialog-close này là một cái gì đó mà các thành phần đối thoại hỗ trợ cho chúng tôi,
thuộc tính này biến nút này thành
một nút mà khi nhấp sẽ đóng hộp thoại này ở đó.
Bên trong cái nút này, tôi sẽ sử dụng một lần trong đó.
Vì vậy, nó sẽ hiển thị nó như một cây thập tự trên màn hình ở đó.
Vì vậy, đó là nút mà chúng tôi sẽ thêm vào cuộc đối thoại.
Ngay bây giờ, cuộc đối thoại của chúng ta chỉ chứa điều này trong quan điểm của nó.
Bây giờ, để cho phép chúng ta bao gồm các thành phần đối thoại và tận dụng nó,
tất nhiên, chúng ta cần phải đi đến các mô-đun ứng dụng.
Trong mô-đun ứng dụng,
chúng ta cần nhập mô-đun tương ứng hỗ trợ thành phần đối thoại.
Vì vậy, chúng tôi sẽ nhập MatdialogueModule
từ hộp thoại vật liệu Angular.
Vì vậy, điều này sẽ thêm trong các mô-đun đối thoại vào ứng dụng của chúng tôi và sau đó như bạn mong đợi,
họ sẽ phải đi xuống đây vào nhập khẩu và sau đó nhập khẩu
mô-đun hộp thoại đó vào ứng dụng của chúng tôi.
Không chỉ thế này, bây giờ,
để biến một thành phần Angular thành một thành phần hộp thoại,
chúng ta còn cần phải khai báo thành phần đó như là một thành phần nhập.
Bây giờ, nhớ lại rằng chúng tôi đã thêm vào thành phần đăng nhập vào ứng dụng của chúng tôi và vì vậy
thành phần đăng nhập này đã được thêm vào
đó và sau đó cũng bao gồm trong các tờ khai.
Bây giờ, nếu bạn muốn sử dụng nó như là một lớp phủ với thành phần hộp thoại vật liệu,
chúng ta cũng cần phải bao gồm đó vào một thuộc tính khác được gọi là thành
phần nhập cảnh trong bộ trang trí mô-đun ng của chúng tôi ở đây.
Vì vậy, bên trong các thành phần mục nhập này,
tôi cũng cần phải bao gồm các thành phần đăng nhập trong đây.
Bây giờ, điều này sẽ cho phép chúng tôi sử dụng
thành phần đăng nhập như một lớp phủ trên đầu trang của màn hình hiện tại.
Vì vậy, một khi chúng tôi đã cập nhật thành phần vật liệu Angular
, bây giờ, chúng ta cần có khả năng kích hoạt thành phần đăng nhập này.
Bây giờ, chúng tôi đã thêm vào nút vào thành
phần tiêu đề và sau đó ở đây chúng tôi có chức năng này được gọi là biểu mẫu đăng nhập mở.
Vì vậy, điều này cần để kích hoạt hiển thị của cuộc đối thoại.
Vì vậy, đi vào tập tin thành phần tiêu đề,
để sử dụng các thành phần hộp thoại mat trong thành phần tiêu đề,
hãy để tôi nhập MatDialog và sau đó
MatDialogref từ vật liệu góc.
Bên trong chức năng này, trong constructor,
hãy để tôi tiêm
các đối thoại như MatDialog.
Vì vậy, đây là một dịch vụ cho phép chúng ta mở các thành phần như một thành phần hộp thoại.
Bây giờ, điều này hoạt động như thế nào?
Vì vậy, trong đây, chúng ta cần phải thêm vào chức năng này được gọi là OpenLog
Inform, mà khi được gọi nên kích hoạt hiển thị của các thành phần đối thoại.
Vì vậy, đối với điều này, chúng ta sẽ nói, hộp thoại này,
và hộp thoại này hỗ trợ một chức năng được gọi
là mở mà chúng tôi cung cấp các thành phần mà sẽ
đóng vai trò như là quan điểm cho các cuộc đối thoại được phủ trên đầu trang của chế độ xem web hiện tại.
Vì vậy, ở đây, như chúng ta nhận ra,
chúng tôi đã tuyên bố thành phần đăng nhập là thành phần hộp thoại.
Vì vậy, chúng tôi sẽ gọi thành phần đăng nhập
và sau đó chúng tôi cũng sẽ chỉ định một kích thước cho hộp thoại.
Nếu bạn muốn,
bạn có thể cho phép hiển thị kích thước mặc định,
nhưng bạn cũng có thể cấu hình kích thước một cách rõ ràng nếu bạn muốn.
Vì vậy, trong trường hợp này,
hãy để tôi cấu hình chiều rộng và chiều cao của hộp thoại này.
Bạn không nhất thiết phải làm điều này, nếu bạn không làm điều này,
thì hộp thoại sẽ được hiển thị trong kích thước mặc định chuẩn ở đây.
Vì vậy, với điều này, thành phần tiêu đề của tôi
bây giờ được cấu hình như vậy mà khi biểu mẫu đăng nhập mở được gọi,
sau đó điều này sẽ cho phép chúng tôi mở
thành phần đăng nhập như một cuộc đối thoại và sau đó hiển thị nó trên đầu trang của chuỗi hiện tại.
Vì vậy, chúng ta hãy lưu tất cả các thay đổi và sau đó đi và
xem ứng dụng của chúng tôi trong trình duyệt.
Đi đến trình duyệt, bây giờ bạn sẽ thấy rằng ở cạnh bên phải của màn hình,
chúng tôi có một nút mới ở đây gọi là nút đăng nhập,
và thấy rằng ký hiệu trong phông chữ biểu tượng tuyệt vời thêm vào đó.
Bây giờ, khi bạn nhấp vào nút đăng nhập,
bạn sẽ ngay lập tức thấy một hộp thoại pop-up trên màn hình.
Một lần nữa, bạn có thể bỏ qua điều đó bằng cách nhấp vào bất kỳ nơi nào trên màn hình bên ngoài
hộp thoại hoặc bạn nhấp vào đó và sau đó hộp thoại bật lên trên màn hình.
Vì vậy, từ Bootstrap, bạn đã thấy phương thức trong Bootstrap.
Vì vậy, điều này là chính xác giống như phương thức từ Bootstrap.
Vì vậy, ở đây, chúng tôi có hộp thoại bật lên trên màn hình.
Bây giờ, chúng ta có không gian trên hộp thoại mà bây giờ chúng ta có thể đặt
trong nội dung mà chúng ta cần phải hiển thị khi hộp thoại này được gọi.
Cũng lưu ý nút bỏ qua này ở đây.
Vì vậy, khi bạn nhấp vào đó,
cuộc đối thoại cũng bị bác bỏ.
Bây giờ, khi bạn nhấp vào bất cứ nơi nào trên hộp thoại,
không có gì xảy ra, nhưng khi bạn nhấp vào nút này, hộp thoại sẽ bị loại bỏ.
Vì vậy, đây là cách thành phần hộp thoại từ vật liệu Angular hoạt động trong ứng dụng của chúng tôi.
Bước tiếp theo là thêm vào biểu mẫu đăng nhập vào hộp thoại này.
Với điều này, chúng tôi hoàn thành bài tập này.
Trong bài tập này, bạn đã thấy cách chúng ta có thể sử dụng hộp thoại vật liệu góc để
thêm một lớp phủ vào ứng dụng của chúng tôi và sau đó hiển thị nó trên đầu trang của chế độ xem hiện tại.
Chúng tôi sẽ thêm vào biểu mẫu này.
Đây là thời điểm tốt để bạn thực hiện cam kết Git với hộp thoại tin nhắn.