什么!在角度语法中意味着什么?

时间:2019-05-30 21:07:26

标签: javascript angular typescript

我现在已经在几个地方看到了这种现象,但是没有找到任何答案。

我很好奇'!' bang确实采用了角度语法。

enter image description here

2 个答案:

答案 0 :(得分:4)

来自Angular documentation

  

非空断言运算符(!)

     

从Typescript 2.0开始,您可以使用   --strictNullChecks标志。然后,TypeScript确保没有变量是无意的nullundefined

     

在此模式下,默认情况下,键入的变量不允许nullundefined。   如果将变量保留为未分配状态,则类型检查器将引发错误。   尝试将nullundefined分配给类型不允许的变量   nullundefined

     

如果类型检查器无法确定是否   变量在运行时将为nullundefined。您可能知道不能   发生,但类型检查器不知道。你告诉类型检查器   不能通过应用后缀non-null assertion operator (!)来实现。

     

角非空断言运算符(!)在以下目的中具有相同的目的   一个Angular模板。

     

例如,使用*ngIf检查是否定义了hero之后,您可以   可以断言hero属性也已定义。

<!--No hero, no text -->
<div *ngIf="hero">
  The hero's name is {{hero!.name}}
</div>
     

当Angular编译器将您的模板转换为TypeScript代码时,它将   阻止TypeScript报告hero.name可能是null或   undefined

     

safe navigation operator不同,非null断言运算符   不反对nullundefined。相反,它告诉   TypeScript类型检查器暂停特定的严格null检查   属性表达式。

     

启用严格null时,将需要此模板运算符   检查。否则是可选的。

答案 1 :(得分:1)

它叫"Non-null assertion operator",与Angular本身无关,它来自打字稿。

import java.awt.*;
import javax.swing.*;
import java.awt.geom.*;
import java.awt.event.*;

public class PaintExample {
    private JFrame frame;
    private JPanel pane;
    private JPanel buttonsPane;
    private CustomShape customShape;
    private JButton squareButton;
    private JButton circleButton;
    private JButton purpleButton;
    private JButton blueButton;

    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> new PaintExample().createAndShowGUI());
    }

    private void createAndShowGUI() {
        frame = new JFrame(getClass().getSimpleName()); //Create a new JFrame with a title = this class name
        pane = new JPanel();
        buttonsPane = new JPanel();

        buttonsPane.setLayout(new GridLayout(2, 2, 5, 5)); // We generate a grid layout of 2 x 2 for our JButtons

        squareButton = new JButton("Square");
        circleButton = new JButton("Circle");
        purpleButton = new JButton("Purple");
        blueButton = new JButton("Blue");

        squareButton.addActionListener(listener);
        circleButton.addActionListener(listener);
        purpleButton.addActionListener(listener);
        blueButton.addActionListener(listener);

        buttonsPane.add(squareButton);
        buttonsPane.add(circleButton);
        buttonsPane.add(purpleButton);
        buttonsPane.add(blueButton);

        customShape = new CustomShape(); // We create an instance of our custom JPanel class

        pane.setLayout(new BorderLayout());
        pane.add(customShape);
        pane.add(buttonsPane, BorderLayout.SOUTH);

        frame.add(pane);
        frame.pack();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }

    ActionListener listener = e -> { //Java 8+, for Java 7- add the actionPerformed method instead of the lambda expression
        // We check which button was clicked and set the shape / color for our custom class
        if (e.getSource().equals(squareButton)) {
            customShape.setShape(ShapeToDraw.SQUARE);
        } else if (e.getSource().equals(circleButton)) {
            customShape.setShape(ShapeToDraw.CIRCLE);
        } else if (e.getSource().equals(purpleButton)) {
            customShape.setColor(Color.MAGENTA);
        } else if (e.getSource().equals(blueButton)) {
            customShape.setColor(Color.BLUE);
        } 
    };

    enum ShapeToDraw {
        SQUARE, CIRCLE // You can define here other properties for each enum option
    }

    class CustomShape extends JPanel {
        private Color color;
        private ShapeToDraw shape;

        public CustomShape() {

        }

        public Color getColor() {
            return color;
        }

        public void setColor(Color color) {
            this.color = color;
            this.repaint(); // Everytime we set the color we ask the component to repaint itself
        }

        public ShapeToDraw getShape() {
            return shape;
        }

        public void setShape(ShapeToDraw shape) {
            this.shape = shape;
            this.repaint(); // Everytime we set the shape we ask the component to repaint itself
        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(200, 200); // We define the panel's size
        }

        @Override
        public void paintComponent(Graphics g) {
            super.paintComponent(g);
            Graphics2D g2d = (Graphics2D) g;
            g2d.setColor(color != null ? color : Color.BLACK); //If we haven't set the Color yet, we default it to black, otherwise we set the color to the one chosen by the user.
            if (shape == ShapeToDraw.SQUARE) { //If the shape is a square, we draw a square
                g2d.draw(new Rectangle2D.Double(50, 50, 100, 100)); // Change the coordinates that you get by user click using the MouseListener
            } else if (shape == ShapeToDraw.CIRCLE) { // Or we draw a circle
                g2d.draw(new Ellipse2D.Double(50, 50, 100, 100));
            } 
        }
    }
}